Skip to content

Commit a9880b8

Browse files
author
Tom Kaczocha
committed
Rebuilt plugin with a better template. Added usage examples to README.
1 parent 444114d commit a9880b8

4 files changed

Lines changed: 157 additions & 21 deletions

File tree

‎README.md‎

Lines changed: 96 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,99 @@
22

33
Bootstrap confirm delete modal dialog jquery plugin
44

5-
## Examples
6-
Coming Soon
5+
6+
## Installation
7+
You can install with [bower](http://bower.io/) or [npm](https://www.npmjs.com/).
8+
9+
```sh
10+
$ bower install bootstrap-confirm-delete
11+
$ npm install --save bootstrap-confirm-delete
12+
```
13+
14+
## Dependencies
15+
This plugin depends on the following:
16+
- jquery >= 1.9.1
17+
- bootstrap >= 3.3.5
18+
19+
NOTE: This plugin has not been tested with versions prior to these.
20+
21+
22+
## Basic Usage
23+
This plugin will intercept the delete event on configured page elements. In this example it will block the deletion click
24+
on any links or buttons that have the 'delete' class on them.
25+
26+
```html
27+
<script src="jquery.js"></script>
28+
<script src="bootstrap-confirm-delete.js"></script>
29+
```
30+
31+
```html
32+
<a href="server.php" class="delete" data_type="post">Delete</a>
33+
```
34+
35+
Initialise the plugin either in <script></script> tags on the html page or in an external .js script.
36+
37+
```js
38+
$( document ).ready( function( )
39+
{
40+
$( '.delete' ).bootstrap_confirm_delete( );
41+
} );
42+
```
43+
44+
Notice the 'data_type' attribute on the link. The plugin will use this attribute if set to show a custom delete message. For example,
45+
46+
Heading: 'Delete Post'
47+
48+
Message: 'Are you sure you want to delete this post?'
49+
50+
51+
## Options
52+
Bootstrap Confirm Delete plugin comes with several option settings.
53+
54+
### Example
55+
This example shows all the available options:
56+
57+
```js
58+
$( document ).ready( function( )
59+
{
60+
$( '.delete' ).bootstrap_confirm_delete(
61+
{
62+
debug: false,
63+
heading: 'My Custom Delete Heading',
64+
message: 'Are you sure you want to delete this item?',
65+
data_type: 'post',
66+
callback: function() { console.log( 'deleting item over ajax' ); },
67+
delete_callback: function() { console.log( 'delete button clicked' ); },
68+
cancel_callback: function() { console.log( 'cancel button clicked' ); }
69+
}
70+
);
71+
} );
72+
```
73+
74+
### debug
75+
Debug mode will output events and information to the console.
76+
77+
### heading
78+
This is for setting a custom modal heading.
79+
80+
### message
81+
Setting a custom delete message/question.
82+
83+
### data_type
84+
Used if heading & message are not provided
85+
86+
### callback
87+
Will fire if responding to a button click that has no href attribute.
88+
89+
Use this callback to do any deletions from a button click.
90+
91+
### delete_callback
92+
Will fire when the delete button is clicked and a handler is provided.
93+
94+
### cancel_callback
95+
Will fire when the cancel button is clicked and a handler is provided.
96+
97+
98+
## License
99+
Copyright &copy; 2015 Tom Kaczocha <tom@rawphp.org>
100+
Licensed under the MIT license.

‎bootstrap-confirm-delete.js‎

Lines changed: 58 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,99 @@
11
/**
2-
* Created by Tom on 9/07/2015.
2+
* Bootstrap Confirm Delete
3+
* Author: Tom Kaczocha <tom@rawphp.org>
4+
* Licensed under the MIT license
35
*/
46

5-
( function ( $ )
7+
;
8+
( function ( $, window, document, undefined )
69
{
7-
$.fn.bootstrap_confirm_delete = function ( options )
10+
var bootstrap_confirm_delete = function ( element, options )
811
{
9-
var settings = $.extend(
12+
this.element = $( element );
13+
this.settings = $.extend(
1014
{
15+
debug: false,
1116
heading: 'Delete',
1217
message: 'Are you sure you want to delete this item?',
1318
data_type: null,
14-
callback: null
15-
}, options );
19+
callback: null,
20+
delete_callback: null,
21+
cancel_callback: null
22+
}, options || {}
23+
);
1624

17-
$( this ).on( 'click', function ( event )
25+
this.onDelete = function ( event )
1826
{
1927
event.preventDefault();
2028

29+
var plugin = $( this ).data( 'bootstrap_confirm_delete' );
30+
2131
if ( undefined !== $( this ).attr( 'data-type' ) )
2232
{
2333
var name = $( this ).attr( 'data-type' );
2434

25-
settings.heading = 'Delete ' + name[ 0 ].toUpperCase() + name.substr( 1 );
26-
settings.message = 'Are you sure you want to delete this ' + name + '?';
35+
plugin.settings.heading = 'Delete ' + name[ 0 ].toUpperCase() + name.substr( 1 );
36+
plugin.settings.message = 'Are you sure you want to delete this ' + name + '?';
2737
}
2838

2939
if ( null === document.getElementById( 'bootstrap-confirm-delete-container' ) )
3040
{
3141
$( 'body' ).append( '<div id="bootstrap-confirm-delete-container"><div id="bootstrap-confirm-dialog" class="modal fade"><div class="modal-dialog modal-sm"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button><h4 id="bootstrap-confirm-dialog-heading"></h4></div><div class="modal-body"><p id="bootstrap-confirm-dialog-text"></p></div><div class="modal-footer"><button id="bootstrap-confirm-dialog-cancel-delete-btn" type="button" class="btn btn-default pull-left" data-dismiss="modal">Cancel</button><a id="bootstrap-confirm-dialog-delete-btn" href="#" class="btn btn-danger pull-right">Delete</a></div></div></div></div></div>' );
3242
}
3343

34-
$( '#bootstrap-confirm-dialog-heading' ).html( settings.heading );
35-
$( '#bootstrap-confirm-dialog-text' ).html( settings.message );
44+
$( '#bootstrap-confirm-dialog-heading' ).html( plugin.settings.heading );
45+
$( '#bootstrap-confirm-dialog-text' ).html( plugin.settings.message );
3646
$( '#bootstrap-confirm-dialog' ).modal( 'toggle' );
3747

38-
if ( null !== settings.callback )
48+
if ( null !== plugin.settings.callback )
3949
{
4050
$( '#bootstrap-confirm-dialog-delete-btn' ).attr( 'data-dismiss', 'modal' );
4151

42-
if ( $.isFunction( settings.callback ) )
52+
if ( $.isFunction( plugin.settings.callback ) )
4353
{
44-
$( 'a#bootstrap-confirm-dialog-delete-btn' ).on( 'click', { originalObject: this }, settings.callback );
54+
var deleteBtn = $( 'a#bootstrap-confirm-dialog-delete-btn' );
55+
56+
deleteBtn.on( 'click', { originalObject: this }, plugin.settings.callback );
57+
58+
if ( null !== plugin.settings.delete_callback )
59+
{
60+
deleteBtn.on( 'click', { originalObject: this }, plugin.settings.delete_callback );
61+
}
4562
}
4663
else
4764
{
48-
console.log( settings.callback + ' is not a valid callback' );
65+
console.log( plugin.settings.callback + ' is not a valid callback' );
4966
}
5067
}
5168
else if ( '' !== event.currentTarget.href )
5269
{
5370
$( 'a#bootstrap-confirm-dialog-delete-btn' ).attr( 'href', event.currentTarget.href );
5471
}
72+
73+
if ( null !== plugin.settings.cancel_callback )
74+
{
75+
$( '#bootstrap-confirm-dialog-cancel-delete-btn' ).on( 'click', { originalObject: this }, plugin.settings.cancel_callback );
76+
}
77+
};
78+
};
79+
80+
$.fn.bootstrap_confirm_delete = function ( options )
81+
{
82+
return this.each( function ()
83+
{
84+
var element = $( this );
85+
86+
if ( element.data( 'bootstrap_confirm_delete' ) )
87+
{
88+
return element.data( 'bootstrap_confirm_delete' );
89+
}
90+
91+
var plugin = new bootstrap_confirm_delete( this, options );
92+
93+
element.data( 'bootstrap_confirm_delete', plugin );
94+
element.on( 'click', plugin.onDelete );
95+
96+
return plugin;
5597
} );
5698
};
57-
}( jQuery ));
99+
}( jQuery, window, document, undefined ));

‎bower.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
{
22
"name": "bootstrap-confirm-delete",
3-
"version": "1.2.0",
3+
"version": "1.3.0",
44
"homepage": "https://github.com/rawphp/Bootstrap-Confirm-Delete",
55
"authors": [
66
"Tom Kaczocha <tom@rawphp.org>"
77
],
88
"description": "Bootstrap confirm delete modal dialog jquery plugin",
9-
"main": "bootstrap-confirm-delete.js, bootstrap-confirm-delete.css",
9+
"main": "bootstrap-confirm-delete.js",
1010
"keywords": [
1111
"bootstrap",
1212
"confirm",

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "bootstrap-confirm-delete",
3-
"version": "1.2.0",
3+
"version": "1.3.0",
44
"description": "Bootstrap confirm delete modal dialog jquery plugin",
55
"main": "bootstrap-confirm-dialog.js",
66
"scripts": {

0 commit comments

Comments
 (0)