├── .npmignore
├── .gitignore
├── confirmation.html
├── Makefile
├── confirmation.css
├── component.json
├── History.md
├── package.json
├── Readme.md
├── test
    └── index.html
└── index.js


/.npmignore:
--------------------------------------------------------------------------------
1 | test
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | test/*.js
3 | test/*.css
4 | build
5 | components
6 | 


--------------------------------------------------------------------------------
/confirmation.html:
--------------------------------------------------------------------------------
1 | <div class="confirmation-actions">
2 |   <button class="cancel">Cancel</button>
3 |   <button class="ok main">Ok</button>
4 | </div>


--------------------------------------------------------------------------------
/Makefile:
--------------------------------------------------------------------------------
 1 | 
 2 | build: components index.js confirmation.html
 3 | 	@component build
 4 | 
 5 | components:
 6 | 	@component install
 7 | 
 8 | clean:
 9 | 	rm -fr build components
10 | 
11 | .PHONY: clean


--------------------------------------------------------------------------------
/confirmation.css:
--------------------------------------------------------------------------------
 1 | .confirmation-actions {
 2 |   border-top: 1px solid #eee;
 3 |   padding: 5px;
 4 |   text-align: right;
 5 |   background: #fafafa;
 6 |   box-shadow: inset 0 1px 0 white;
 7 | }
 8 | 
 9 | @import 'node_modules/dialog-component/dialog.css';
10 | @import 'node_modules/overlay-component/overlay.css';
11 | 


--------------------------------------------------------------------------------
/component.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "confirmation",
 3 |   "description": "Confirmation component",
 4 |   "version": "0.0.5",
 5 |   "keywords": [
 6 |     "confirmation",
 7 |     "ui"
 8 |   ],
 9 |   "dependencies": {
10 |     "component/event": "*",
11 |     "component/dialog": "*",
12 |     "component/inherit": "*",
13 |     "component/query": "*"
14 |   },
15 |   "scripts": [
16 |     "index.js"
17 |   ],
18 |   "styles": [
19 |     "confirmation.css"
20 |   ],
21 |   "templates": [
22 |     "confirmation.html"
23 |   ],
24 |   "demo": "http://component.github.io/confirmation/",
25 |   "license": "MIT"
26 | }
27 | 


--------------------------------------------------------------------------------
/History.md:
--------------------------------------------------------------------------------
 1 | 
 2 | 0.0.5 / 2014-04-02 
 3 | ==================
 4 | 
 5 |  * remove jquery dependency
 6 |  * Change from __proto__ to inherit for IE
 7 | 
 8 | 0.0.4 / 2012-11-06 
 9 | ==================
10 | 
11 |   * fix missing jquery dep [MatthewMueller]
12 | 
13 | 0.0.3 / 2012-11-01 
14 | ==================
15 | 
16 |   * fix setup for recent component
17 |   * Merge pull request #1 from component-bot/master
18 |   * add .license property to component.json
19 |   * add focus(ok) to test
20 |   * add docs
21 |   * add .focus(type)
22 |   * change focus to .cancel by default
23 |   * Initial commit
24 | 
25 | 0.0.2 / 2012-07-05 
26 | ==================
27 | 
28 |   * fix dialog.effect support
29 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "democracyos-confirmation",
 3 |   "description": "Confirmation component",
 4 |   "version": "0.0.5",
 5 |   "keywords": [
 6 |     "confirmation",
 7 |     "component"
 8 |   ],
 9 |   "dependencies": {
10 |     "dialog-component": "*",
11 |     "component-event": "*",
12 |     "component-inherit": "*",
13 |     "component-query": "*",
14 |     "stringify": "^3.1.0"
15 |   },
16 |   "style": "confirmation.css",
17 |   "browserify": {
18 |     "transform": ["stringify"]
19 |   },
20 |   "browser": {
21 |     "dialog": "dialog-component",
22 |     "event": "component-event",
23 |     "inherit": "component-inherit",
24 |     "query": "component-query"
25 |   },
26 |   "repository": {
27 |     "type": "git",
28 |     "url": "https://github.com/DemocracyOS/confirmation.git"
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/Readme.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # Confirmation
 3 | 
 4 |   Confirmation component with structural styling to give you a clean slate. Built on
 5 |   the [Dialog](http://github.com/component/dialog) component.
 6 | 
 7 |   ![js confirmation component](http://f.cl.ly/items/142j0B0d1E2K3z0r3h0i/Screen%20Shot%202012-08-03%20at%2011.37.49%20AM.png)
 8 |   ![confirm](http://f.cl.ly/items/0o0z3T2R0o1v3S1E3d2W/Screen%20Shot%202012-08-03%20at%2011.37.57%20AM.png)
 9 | 
10 |   Live demo is [here](http://component.github.io/confirmation/)
11 | 
12 | ## Installation
13 | 
14 | ```
15 | $ npm install confirmation-component
16 | ```
17 | 
18 | ## Features
19 | 
20 |   - events for composition
21 |   - structural CSS letting you decide on style
22 |   - overlay, modal, escapable etc from Dialog
23 |   - fluent API
24 | 
25 | ## Events
26 | 
27 |   - `show` the confirmation is shown
28 |   - `hide` the confirmation is hidden
29 |   - `cancel` the user closed the confirmation or cancelled
30 |   - `ok` the user accepted
31 | 
32 | ## API
33 |   
34 | ### confirm(msg)
35 | 
36 |   Display a confirmation dialog with a `msg` only.
37 | 
38 | ### confirm(title, msg)
39 | 
40 |   Display a confirmation dialog with `title` and `msg`.
41 | 
42 | ### Confirmation#focus(type)
43 | 
44 |   By default the "cancel" button is focused, however you
45 |   may invoke `.focus('ok')`.
46 | 
47 | ### Confirmation#cancel(text)
48 | 
49 |   Set cancel button `text`.
50 | 
51 | ### Confirmation#ok(text)
52 | 
53 |   Set cancel ok `text`.
54 | 
55 | ### Confirmation#show([fn])
56 | 
57 |   Show the confirmation and invoke `fn` with
58 |   a boolean representing the user's choice.
59 | 
60 |   View the [Dialog](http://github.com/component/dialog) API for
61 |   additional methods such as `.modal()`, `.closable()` etc.
62 | 
63 | ## License
64 | 
65 |   MIT
66 | 


--------------------------------------------------------------------------------
/test/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE 5>
 2 | <html>
 3 |   <head>
 4 |     <title>Confirmation</title>
 5 |     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 6 |     <link rel="stylesheet" href="../build/build.css" />
 7 |   </head>
 8 |   <body>
 9 |     <title>Confirmation</title>
10 |     <script src="../build/build.js"></script>
11 |     <script>
12 |       var confirm = require('confirmation')
13 |         , Dialog = require('component-dialog');
14 | 
15 |       Dialog.effect = 'slide';
16 | 
17 |       confirm('Are you sure?')
18 |         .focus('ok')
19 |         .show(function(yes){
20 |           if (yes) {
21 |             console.log('removed');
22 |           } else {
23 |             console.log('not removed');
24 |           }
25 |           title();
26 |         });
27 | 
28 |       function title() {
29 |         confirm('Delete user', 'Are you sure?')
30 |           .show(function(yes){
31 |             if (yes) {
32 |               console.log('removed');
33 |             } else {
34 |               console.log('not removed');
35 |             }
36 |             modal();
37 |           });
38 |       }
39 | 
40 |       function modal() {
41 |         confirm('Delete user', 'Are you sure?')
42 |           .modal()
43 |           .show(function(yes){
44 |             if (yes) {
45 |               console.log('removed');
46 |             } else {
47 |               console.log('not removed');
48 |             }
49 |             closable();
50 |           });
51 |       }
52 | 
53 |       function closable() {
54 |         confirm('Closable')
55 |           .modal()
56 |           .closable()
57 |           .cancel('Dont do it!')
58 |           .ok('Do it!')
59 |           .show(function(yes){
60 |             if (yes) {
61 |               console.log('removed');
62 |             } else {
63 |               console.log('not removed');
64 |             }
65 |           });
66 |       }
67 | 
68 |     </script>
69 |   </body>
70 | </html>


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Module dependencies.
  3 |  */
  4 | 
  5 | var Dialog = require('dialog').Dialog
  6 |   , events = require('event')
  7 |   , q = require('query')
  8 |   , html = require('./confirmation.html')
  9 |   , inherit = require('inherit');
 10 | 
 11 | /**
 12 |  * Expose `confirm()`.
 13 |  */
 14 | 
 15 | exports = module.exports = confirm;
 16 | 
 17 | /**
 18 |  * Expose `Confirmation`.
 19 |  */
 20 | 
 21 | exports.Confirmation = Confirmation;
 22 | 
 23 | /**
 24 |  * Return a new `Confirmation` with the given
 25 |  * (optional) `title` and `msg`.
 26 |  *
 27 |  * @param {String} title or msg
 28 |  * @param {String} msg
 29 |  * @return {Confirmation}
 30 |  * @api public
 31 |  */
 32 | 
 33 | function confirm(title, msg) {
 34 |   switch (arguments.length) {
 35 |     case 2:
 36 |       return new Confirmation({ title: title, message: msg });
 37 |     case 1:
 38 |       return new Confirmation({ message: title });
 39 |   }
 40 | }
 41 | 
 42 | /**
 43 |  * Initialize a new `Confirmation` dialog.
 44 |  *
 45 |  * @param {Object} options
 46 |  * @api public
 47 |  */
 48 | 
 49 | function Confirmation(options) {
 50 |   Dialog.call(this, options);
 51 |   this.focus('cancel');
 52 | }
 53 | 
 54 | /**
 55 |  * Inherits from `Dialog.prototype`.
 56 |  */
 57 | 
 58 | inherit(Confirmation, Dialog);
 59 | 
 60 | /**
 61 |  * Focus `type`, either "ok" or "cancel".
 62 |  *
 63 |  * @param {String} type
 64 |  * @return {Confirmation}
 65 |  * @api public
 66 |  */
 67 | 
 68 | Confirmation.prototype.focus = function(type){
 69 |   this._focus = type;
 70 |   return this;
 71 | };
 72 | 
 73 | /**
 74 |  * Change "cancel" button `text`.
 75 |  *
 76 |  * @param {String} text
 77 |  * @return {Confirmation}
 78 |  * @api public
 79 |  */
 80 | 
 81 | Confirmation.prototype.cancel = function(text){
 82 |   q('.cancel', this.el).innerHTML = text;
 83 |   return this;
 84 | };
 85 | 
 86 | /**
 87 |  * Change "ok" button `text`.
 88 |  *
 89 |  * @param {String} text
 90 |  * @return {Confirmation}
 91 |  * @api public
 92 |  */
 93 | 
 94 | Confirmation.prototype.ok = function(text){
 95 |   q('.ok', this.el).innerHTML = text;
 96 |   return this;
 97 | };
 98 | 
 99 | /**
100 |  * Show the confirmation dialog and invoke `fn(ok)`.
101 |  *
102 |  * @param {Function} fn
103 |  * @return {Confirmation} for chaining
104 |  * @api public
105 |  */
106 | 
107 | Confirmation.prototype.show = function(fn){
108 |   Dialog.prototype.show.call(this);
109 |   q('.' + this._focus, this.el).focus();
110 |   this.callback = fn || function(){};
111 |   return this;
112 | };
113 | 
114 | /**
115 |  * Render with the given `options`.
116 |  *
117 |  * Emits "cancel" event.
118 |  * Emits "ok" event.
119 |  *
120 |  * @param {Object} options
121 |  * @api public
122 |  */
123 | 
124 | Confirmation.prototype.render = function(options){
125 |   var self = this;
126 |   Dialog.prototype.render.call(this, options);
127 | 
128 |   this._classes.add('confirmation');
129 |   this.el.insertAdjacentHTML('beforeend', html);
130 | 
131 |   this.on('close', function(){
132 |     self.emit('cancel');
133 |     self.callback(false);
134 |   });
135 | 
136 |   this.on('escape', function(){
137 |     self.emit('cancel');
138 |     self.callback(false);
139 |   });
140 | 
141 |   events.bind(q('.cancel', this.el), 'click', function(e){
142 |     e.preventDefault();
143 |     self.emit('cancel');
144 |     self.callback(false);
145 |     self.hide();
146 |   });
147 | 
148 |   events.bind(q('.ok', this.el), 'click', function(e){
149 |     e.preventDefault();
150 |     self.emit('ok');
151 |     self.callback(true);
152 |     self.hide();
153 |   });
154 | };
155 | 


--------------------------------------------------------------------------------