Permalink
Browse files

Initial commit

  • Loading branch information...
0 parents commit ed0a6bf26ff028e776eb704b3e872429f131227d @tj tj committed Aug 3, 2012
Showing with 324 additions and 0 deletions.
  1. +3 −0 .gitignore
  2. +1 −0 .npmignore
  3. +5 −0 History.md
  4. +8 −0 Makefile
  5. +58 −0 Readme.md
  6. +12 −0 component.json
  7. +7 −0 confirmation.css
  8. +4 −0 confirmation.html
  9. +138 −0 index.js
  10. +18 −0 package.json
  11. +70 −0 test/index.html
@@ -0,0 +1,3 @@
+node_modules
+test/*.js
+test/*.css
@@ -0,0 +1 @@
+test
@@ -0,0 +1,5 @@
+
+0.0.2 / 2012-07-05
+==================
+
+ * fix dialog.effect support
@@ -0,0 +1,8 @@
+
+test/out.js: index.js confirmation.css
+ component build package.json test/out
+
+clean:
+ rm -f test/out.{js,css}
+
+.PHONY: clean
@@ -0,0 +1,58 @@
+
+# Confirmation
+
+ Confirmation component with structural styling to give you a clean slate. Built on
+ the [Dialog](http://github.com/component/dialog) component.
+
+ ![js confirmation component](http://f.cl.ly/items/142j0B0d1E2K3z0r3h0i/Screen%20Shot%202012-08-03%20at%2011.37.49%20AM.png)
+ ![confirm](http://f.cl.ly/items/0o0z3T2R0o1v3S1E3d2W/Screen%20Shot%202012-08-03%20at%2011.37.57%20AM.png)
+
+## Installation
+
+```
+$ npm install confirmation-component
+```
+
+## Features
+
+ - events for composition
+ - structural CSS letting you decide on style
+ - overlay, modal, escapable etc from Dialog
+ - fluent API
+
+## Events
+
+ - `show` the confirmation is shown
+ - `hide` the confirmation is hidden
+ - `cancel` the user closed the confirmation or cancelled
+ - `ok` the user accepted
+
+## API
+
+### confirm(msg)
+
+ Display a confirmation dialog with a `msg` only.
+
+### confirm(title, msg)
+
+ Display a confirmation dialog with `title` and `msg`.
+
+### Confirmation#cancel(text)
+
+ Set cancel button `text`.
+
+### Confirmation#ok(text)
+
+ Set cancel ok `text`.
+
+### Confirmation#show([fn])
+
+ Show the confirmation and invoke `fn` with
+ a boolean representing the user's choice.
+
+ View the [Dialog](http://github.com/component/dialog) API for
+ additional methods such as `.modal()`, `.closable()` etc.
+
+## License
+
+ MIT
@@ -0,0 +1,12 @@
+{
+ "name": "confirmation",
+ "description": "Confirmation component",
+ "version": "0.0.1",
+ "keywords": ["confirmation", "ui"],
+ "dependencies": {
+ "component/dialog": "*"
+ },
+ "scripts": ["index.js"],
+ "styles": ["confirmation.css"],
+ "templates": ["confirmation.html"]
+}
@@ -0,0 +1,7 @@
+.confirmation-actions {
+ border-top: 1px solid #eee;
+ padding: 5px;
+ text-align: right;
+ background: #fafafa;
+ box-shadow: inset 0 1px 0 white;
+}
@@ -0,0 +1,4 @@
+<div class="confirmation-actions">
+ <button class="cancel">Cancel</button>
+ <button class="ok main">Ok</button>
+</div>
@@ -0,0 +1,138 @@
+
+/**
+ * Module dependencies.
+ */
+
+var Dialog = require('dialog').Dialog;
+
+/**
+ * Expose `confirm()`.
+ */
+
+exports = module.exports = confirm;
+
+/**
+ * Expose `Confirmation`.
+ */
+
+exports.Confirmation = Confirmation;
+
+/**
+ * Return a new `Confirmation` with the given
+ * (optional) `title` and `msg`.
+ *
+ * @param {String} title or msg
+ * @param {String} msg
+ * @return {Confirmation}
+ * @api public
+ */
+
+function confirm(title, msg) {
+ switch (arguments.length) {
+ case 2:
+ return new Confirmation({ title: title, message: msg });
+ case 1:
+ return new Confirmation({ message: title });
+ }
+}
+
+/**
+ * Initialize a new `Confirmation` dialog.
+ *
+ * @param {Object} options
+ * @api public
+ */
+
+function Confirmation(options) {
+ Dialog.call(this, options);
+};
+
+/**
+ * Inherits from `Dialog.prototype`.
+ */
+
+Confirmation.prototype.__proto__ = Dialog.prototype;
+
+/**
+ * Change "cancel" button `text`.
+ *
+ * @param {String} text
+ * @return {Confirmation}
+ * @api public
+ */
+
+Confirmation.prototype.cancel = function(text){
+ this.el.find('.cancel').text(text);
+ return this;
+};
+
+/**
+ * Change "ok" button `text`.
+ *
+ * @param {String} text
+ * @return {Confirmation}
+ * @api public
+ */
+
+Confirmation.prototype.ok = function(text){
+ this.el.find('.ok').text(text);
+ return this;
+};
+
+/**
+ * Show the confirmation dialog and invoke `fn(ok)`.
+ *
+ * @param {Function} fn
+ * @return {Confirmation} for chaining
+ * @api public
+ */
+
+Confirmation.prototype.show = function(fn){
+ Dialog.prototype.show.call(this);
+ this.el.find('.ok').focus();
+ this.callback = fn || function(){};
+ return this;
+};
+
+/**
+ * Render with the given `options`.
+ *
+ * Emits "cancel" event.
+ * Emits "ok" event.
+ *
+ * @param {Object} options
+ * @api public
+ */
+
+Confirmation.prototype.render = function(options){
+ var self = this
+ var actions = $(render('confirmation'));
+ Dialog.prototype.render.call(this, options);
+
+ this.el.addClass('confirmation');
+ this.el.append(actions);
+
+ this.on('close', function(){
+ self.emit('cancel');
+ self.callback(false);
+ });
+
+ this.on('escape', function(){
+ self.emit('cancel');
+ self.callback(false);
+ });
+
+ actions.find('.cancel').click(function(e){
+ e.preventDefault();
+ self.emit('cancel');
+ self.callback(false);
+ self.hide();
+ });
+
+ actions.find('.ok').click(function(e){
+ e.preventDefault();
+ self.emit('ok');
+ self.callback(true);
+ self.hide();
+ });
+};
@@ -0,0 +1,18 @@
+{
+ "name": "confirmation-component",
+ "description": "Confirmation component",
+ "version": "0.0.1",
+ "keywords": ["confirmation", "component"],
+ "dependencies": {
+ "dialog-component": "*"
+ },
+ "component": {
+ "styles": ["confirmation.css"],
+ "scripts": {
+ "confirmation": "index.js"
+ },
+ "templates": {
+ "confirmation": "confirmation.html"
+ }
+ }
+}
@@ -0,0 +1,70 @@
+<!DOCTYPE 5>
+<html>
+ <head>
+ <title>Confirmation</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <link rel="stylesheet" href="out.css" />
+ </head>
+ <body>
+ <title>Confirmation</title>
+ <script src="out.js"></script>
+ <script>
+ var confirm = require('confirmation')
+ , Dialog = require('dialog')
+ , $ = require('jquery');
+
+ Dialog.effect = 'slide';
+
+ confirm('Are you sure?')
+ .show(function(yes){
+ if (yes) {
+ console.log('removed');
+ } else {
+ console.log('not removed');
+ }
+ title();
+ });
+
+ function title() {
+ confirm('Delete user', 'Are you sure?')
+ .show(function(yes){
+ if (yes) {
+ console.log('removed');
+ } else {
+ console.log('not removed');
+ }
+ modal();
+ });
+ }
+
+ function modal() {
+ confirm('Delete user', 'Are you sure?')
+ .modal()
+ .show(function(yes){
+ if (yes) {
+ console.log('removed');
+ } else {
+ console.log('not removed');
+ }
+ closable();
+ });
+ }
+
+ function closable() {
+ confirm('Closable')
+ .modal()
+ .closable()
+ .cancel('Dont do it!')
+ .ok('Do it!')
+ .show(function(yes){
+ if (yes) {
+ console.log('removed');
+ } else {
+ console.log('not removed');
+ }
+ });
+ }
+
+ </script>
+ </body>
+</html>

0 comments on commit ed0a6bf

Please sign in to comment.