Permalink
Browse files

Added a demo and readme to the repository.

  • Loading branch information...
1 parent db7dd7b commit 713287c4c7cf7fcf1cffbf9fde4e2e01ee5f2e5d @fredwu committed Jun 28, 2011
Showing with 279 additions and 117 deletions.
  1. +75 −0 README.md
  2. +69 −0 index.html
  3. +0 −117 jquery.inline-confirmation.js
  4. +117 −0 js/jquery.inline-confirmation.js
  5. +18 −0 js/jquery.min.js
View
@@ -0,0 +1,75 @@
+# Inline Confirmation plugin for jQuery
+
+In a web app, it is very common to have actions that destroy (delete/remove) data. These actions, if you don’t already know, should always map to POST methods. On top of that, because these actions are destructive, the UI should always ask the user for confirmation.
+
+But how do we actually implement the confirmation dialogue though? The vanilla JavaScript confirm box would be the easiest but at the same time the ugliest - this thing stalls most web browsers until the user acts on it.
+
+An inline popup/modal box? Perhaps, but it is still obtrusive, in the sense that the popup/model boxes are usually in the way of other tasks.
+
+Meet __Inline Confirmation__ - a jQuery plugin for creating easy, less obtrusive confirmation dialogues!
+
+There are a few options to customise the behaviour of this plugin:
+
+- _confirm_ (string) the HTML for the confirm action (default: "<a href='#'>Confirm</a>")
+- _cancel_ (string) the HTML for the cancel action (default: "<a href='#'>Cancel</a>")
+- _separator_ (string) the HTML for the separator between the confirm and the cancel actions (default: " ")
+- _reverse_ (boolean) revert the confirm and the cancel actions (default: false)
+- _hideOriginalAction_ (boolean) whether or not to hide the original action, useful for display the dialogue as a modal if set to false (default: true)
+- _bindsOnEvent_ (string) the JavaScript event handler for binding the confirmation action (default: "click")
+- _expiresIn_ (integer) seconds before the confirmation dialogue closes automatically, 0 to disable this feature (default: 0)
+- _confirmCallback_ (function) the callback function to execute after the confirm action, accepts the original action object as an argument
+- _cancelCallback_ (function) the callback function to execute after the cancel action, accepts the original action object as an argument
+
+
+## Usage
+
+``` js
+// using default options
+$("a.delete").inlineConfirmation();
+
+// using some custom options
+$("a.delete").inlineConfirmation({
+ confirm: "<a href='#' class='confirm-yes'>Yes</a>",
+ cancel: "<a href='#' class='confirm-no'>No</a>",
+ separator: " | ",
+ reverse: true,
+ bindsOnEvent: "hover",
+ confirmCallback: function(action) {
+ action.parent().fadeIn();
+ }
+});
+```
+
+## Changelog
+
+v1.4.0 [2011-06-28]
+
+- Added a demo and readme to the repository.
+
+v1.3.1 [2010-08-04]
+
+- Fixed a regression bug that causes `expiresIn` to stop working.
+
+v1.3.0 [2010-08-04]
+
+- Removed `allowMultiple` option as tracking multiple instances of the dialogues is not a good idea (the code was broken anyway).
+- Added the original action object as an argument to the callback functions.
+- Fixed a bug where original actions would disappear.
+
+v1.2.0 [2010-08-04]
+
+- Added `hideOriginalAction` option.
+
+v1.1.0 [2010-08-04]
+
+- Added `allowMultiple` option.
+
+v1.0.0 [2010-08-03]
+
+- Initial release.
+
+## License
+
+Copyright (c) 2010 Fred Wu
+
+Released under the [MIT](http://www.opensource.org/licenses/mit-license.php) license.
View
@@ -0,0 +1,69 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <title>Inline Confirmation Demo (by Fred Wu)</title>
+ <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
+
+ <script type="text/javascript" src="js/jquery.min.js"></script>
+ <script type="text/javascript" src="js/jquery.inline-confirmation.js"></script>
+ <script type="text/javascript" charset="utf-8">
+ $(function() {
+ $("form#users input.remove").inlineConfirmation({
+ confirmCallback: function() {
+ $(this).parents("tr").fadeOut();
+ },
+ reverse: true,
+ expiresIn: 3
+ });
+ });
+ </script>
+</head>
+
+<body>
+ <h1>Inline Confirmation Demo</h1>
+ <h3>by Fred Wu</h3>
+ <br />
+ <form id="users">
+ <table>
+ <tr>
+ <td>Fred Wu</td>
+ <td><input class="remove" type="submit" value="Remove" /></td>
+ </tr>
+ <tr>
+ <td>Sheldon Cooper</td>
+ <td><input class="remove" type="submit" value="Remove" /></td>
+ </tr>
+ <tr>
+ <td>Leonard Hofstadter</td>
+ <td><input class="remove" type="submit" value="Remove" /></td>
+ </tr>
+ <tr>
+ <td>Howard Wolowitz</td>
+ <td><input class="remove" type="submit" value="Remove" /></td>
+ </tr>
+ <tr>
+ <td>Rajesh Koothrappali</td>
+ <td><input class="remove" type="submit" value="Remove" /></td>
+ </tr>
+ <tr>
+ <td>Penny</td>
+ <td><input class="remove" type="submit" value="Remove" /></td>
+ </tr>
+ <tr>
+ <td>Leslie Winkle</td>
+ <td><input class="remove" type="submit" value="Remove" /></td>
+ </tr>
+ <tr>
+ <td>Bernadette Rostenkowski</td>
+ <td><input class="remove" type="submit" value="Remove" /></td>
+ </tr>
+ <tr>
+ <td>Amy Farrah Fowler</td>
+ <td><input class="remove" type="submit" value="Remove" /></td>
+ </tr>
+ </table>
+ </form>
+</body>
+
+</html>
@@ -1,117 +0,0 @@
-/**
- * Inline Confirmation plugin for jQuery
- *
- * One of the less obtrusive ways of implementing a confirmation dialogue. Requires jQuery 1.4.2+.
- *
- * v1.3.1
- *
- * Copyright (c) 2010 Fred Wu
- *
- * Released under the MIT license: http://www.opensource.org/licenses/mit-license.php
- */
-
-/**
- * Usage:
- *
- * // using default options
- * $("a.delete").inlineConfirmation();
- *
- * // using some custom options
- * $("a.delete").inlineConfirmation({
- * confirm: "<a href='#' class='confirm-yes'>Yes</a>",
- * cancel: "<a href='#' class='confirm-no'>No</a>",
- * separator: " | ",
- * reverse: true,
- * bindsOnEvent: "hover",
- * confirmCallback: function(action) {
- * action.parent().fadeIn();
- * }
- * });
- *
- * Configuration options:
- *
- * confirm string the HTML for the confirm action (default: "<a href='#'>Confirm</a>")
- * cancel string the HTML for the cancel action (default: "<a href='#'>Cancel</a>")
- * separator string the HTML for the separator between the confirm and the cancel actions (default: " ")
- * reverse boolean revert the confirm and the cancel actions (default: false)
- * hideOriginalAction boolean whether or not to hide the original action, useful for display the dialogue as a modal if set to false (default: true)
- * bindsOnEvent string the JavaScript event handler for binding the confirmation action (default: "click")
- * expiresIn integer seconds before the confirmation dialogue closes automatically, 0 to disable this feature (default: 0)
- * confirmCallback function the callback function to execute after the confirm action, accepts the original action object as an argument
- * cancelCallback function the callback function to execute after the cancel action, accepts the original action object as an argument
- */
-
-(function($){
-
- $.fn.inlineConfirmation = function(options) {
- var defaults = {
- confirm: "<a href='#'>Confirm</a>",
- cancel: "<a href='#'>Cancel</a>",
- separator: " ",
- reverse: false,
- hideOriginalAction: true,
- bindsOnEvent: "click",
- expiresIn: 0,
- confirmCallback: function() { return true; },
- cancelCallback: function() { return true; }
- };
-
- var original_action;
- var all_actions = $(this);
- var options = $.extend(defaults, options);
- var block_class = "inline-confirmation-block";
- var confirm_class = "inline-confirmation-confirm";
- var cancel_class = "inline-confirmation-cancel";
- var action_class = "inline-confirmation-action";
-
- options.confirm = "<span class='" + action_class + " " + confirm_class + "'>" + options.confirm + "</span>";
- options.cancel = "<span class='" + action_class + " " + cancel_class + "'>" + options.cancel + "</span>";
-
- var action_set = options.reverse === false
- ? options.confirm + options.separator + options.cancel
- : options.cancel + options.separator + options.confirm;
-
- $(this).live(options.bindsOnEvent, function(e) {
- original_action = $(this);
-
- all_actions.show();
- $("span." + block_class).hide();
-
- if (options.hideOriginalAction === true) {
- $(this).trigger("update").hide();
- }
-
- var active_action_set = $("span." + block_class, $(this).parent());
-
- if (active_action_set.length > 0) {
- active_action_set.show();
- } else {
- $(this).after("<span class='" + block_class + "'>" + action_set + "</span>");
- }
-
- if (options.expiresIn > 0) {
- setTimeout(function() {
- $("span." + block_class, original_action.parent()).hide();
- original_action.show();
- }, options.expiresIn * 1000);
- }
-
- e.preventDefault();
- });
-
- $(this).parent().delegate("span." + action_class, "click", function() {
- $(this).parent().hide();
- original_action.show();
-
- var args = new Array();
- args[0] = original_action;
-
- if ($(this).hasClass(confirm_class)) {
- options.confirmCallback.apply(this, args);
- } else {
- options.cancelCallback.apply(this, args);
- }
- });
- };
-
-})(jQuery);
@@ -0,0 +1,117 @@
+/**
+ * Inline Confirmation plugin for jQuery
+ *
+ * One of the less obtrusive ways of implementing a confirmation dialogue. Requires jQuery 1.4.2+.
+ *
+ * v1.4.0
+ *
+ * Copyright (c) 2010 Fred Wu
+ *
+ * Released under the MIT license: http://www.opensource.org/licenses/mit-license.php
+ */
+
+/**
+ * Usage:
+ *
+ * // using default options
+ * $("a.delete").inlineConfirmation();
+ *
+ * // using some custom options
+ * $("a.delete").inlineConfirmation({
+ * confirm: "<a href='#' class='confirm-yes'>Yes</a>",
+ * cancel: "<a href='#' class='confirm-no'>No</a>",
+ * separator: " | ",
+ * reverse: true,
+ * bindsOnEvent: "hover",
+ * confirmCallback: function(action) {
+ * action.parent().fadeIn();
+ * }
+ * });
+ *
+ * Configuration options:
+ *
+ * confirm string the HTML for the confirm action (default: "<a href='#'>Confirm</a>")
+ * cancel string the HTML for the cancel action (default: "<a href='#'>Cancel</a>")
+ * separator string the HTML for the separator between the confirm and the cancel actions (default: " ")
+ * reverse boolean revert the confirm and the cancel actions (default: false)
+ * hideOriginalAction boolean whether or not to hide the original action, useful for display the dialogue as a modal if set to false (default: true)
+ * bindsOnEvent string the JavaScript event handler for binding the confirmation action (default: "click")
+ * expiresIn integer seconds before the confirmation dialogue closes automatically, 0 to disable this feature (default: 0)
+ * confirmCallback function the callback function to execute after the confirm action, accepts the original action object as an argument
+ * cancelCallback function the callback function to execute after the cancel action, accepts the original action object as an argument
+ */
+
+(function($){
+
+ $.fn.inlineConfirmation = function(options) {
+ var defaults = {
+ confirm: "<a href='#'>Confirm</a>",
+ cancel: "<a href='#'>Cancel</a>",
+ separator: " ",
+ reverse: false,
+ hideOriginalAction: true,
+ bindsOnEvent: "click",
+ expiresIn: 0,
+ confirmCallback: function() { return true; },
+ cancelCallback: function() { return true; }
+ };
+
+ var original_action;
+ var all_actions = $(this);
+ var options = $.extend(defaults, options);
+ var block_class = "inline-confirmation-block";
+ var confirm_class = "inline-confirmation-confirm";
+ var cancel_class = "inline-confirmation-cancel";
+ var action_class = "inline-confirmation-action";
+
+ options.confirm = "<span class='" + action_class + " " + confirm_class + "'>" + options.confirm + "</span>";
+ options.cancel = "<span class='" + action_class + " " + cancel_class + "'>" + options.cancel + "</span>";
+
+ var action_set = options.reverse === false
+ ? options.confirm + options.separator + options.cancel
+ : options.cancel + options.separator + options.confirm;
+
+ $(this).live(options.bindsOnEvent, function(e) {
+ original_action = $(this);
+
+ all_actions.show();
+ $("span." + block_class).hide();
+
+ if (options.hideOriginalAction === true) {
+ $(this).trigger("update").hide();
+ }
+
+ var active_action_set = $("span." + block_class, $(this).parent());
+
+ if (active_action_set.length > 0) {
+ active_action_set.show();
+ } else {
+ $(this).after("<span class='" + block_class + "'>" + action_set + "</span>");
+ }
+
+ if (options.expiresIn > 0) {
+ setTimeout(function() {
+ $("span." + block_class, original_action.parent()).hide();
+ original_action.show();
+ }, options.expiresIn * 1000);
+ }
+
+ e.preventDefault();
+ });
+
+ $(this).parent().delegate("span." + action_class, "click", function() {
+ $(this).parent().hide();
+ original_action.show();
+
+ var args = new Array();
+ args[0] = original_action;
+
+ if ($(this).hasClass(confirm_class)) {
+ options.confirmCallback.apply(this, args);
+ } else {
+ options.cancelCallback.apply(this, args);
+ }
+ });
+ };
+
+})(jQuery);
View

Large diffs are not rendered by default.

Oops, something went wrong.

0 comments on commit 713287c

Please sign in to comment.