├── .gitignore ├── Gruntfile.js ├── README.md ├── bootstrap-confirm-button.min.js ├── bootstrap-confirm-button.src.js ├── examples └── simple.html ├── images └── confirm-delete-button.png ├── index.html ├── index.tmpl.html ├── license.txt └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | npm-debug.log 3 | node_modules 4 | components 5 | bower_components/ 6 | .grunt 7 | .idea/ 8 | smart.lock 9 | packages/ 10 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = function(grunt) { 4 | 5 | grunt.initConfig({ 6 | pkg: grunt.file.readJSON('package.json'), 7 | meta: { 8 | banner: 9 | '/* \n'+ 10 | ' * <%= pkg.name %> v<%= pkg.version %> - <%= grunt.template.today("yyyy-mm-dd") %> \n'+ 11 | ' * \n'+ 12 | ' * Copyright <%= grunt.template.today("yyyy") %> <%= pkg.author.name %> \n'+ 13 | ' * <%= pkg.author.email %> \n'+ 14 | ' * <%= pkg.author.url %> \n'+ 15 | ' * \n'+ 16 | ' * Licensed under the <%= pkg.license %> license. \n'+ 17 | ' * \n'+ 18 | ' * Demos: \n'+ 19 | ' * <%= pkg.homepage %> \n'+ 20 | ' * \n'+ 21 | ' * Source: \n'+ 22 | ' * <%= pkg.repository.url %> \n'+ 23 | ' * \n'+ 24 | ' */\n' 25 | }, 26 | clean: { 27 | dist: { 28 | src: ['index.html','bootstrap-confirm-button.min.js'] 29 | } 30 | }, 31 | jshint: { 32 | options: { 33 | globals: { 34 | console: true, 35 | module: true 36 | }, 37 | "-W099": true, //ignora tabs e space warning 38 | "-W033": true, 39 | "-W044": true //ignore regexp 40 | }, 41 | files: ['bootstrap-confirm-button.src.js'] 42 | }, 43 | uglify: { 44 | options: { 45 | banner: '<%= meta.banner %>' 46 | }, 47 | dist: { 48 | files: { 49 | 'bootstrap-confirm-button.min.js': ['bootstrap-confirm-button.src.js'] 50 | } 51 | } 52 | }, 53 | markdown: { 54 | readme: { 55 | files: { 56 | 'index.html': ['README.md'] 57 | }, 58 | options: { 59 | template: 'index.tmpl.html', 60 | templateContext: function() { 61 | var cfg = grunt.config(); 62 | cfg.title = cfg.pkg.name.replace(/-/g,' '); 63 | cfg.ribbonurl = 'http://ghbtns.com/github-btn.html?user=stefanocudini&repo='+cfg.pkg.name+'&type=watch&count=true'; 64 | cfg.giturl = 'https://github.com/stefanocudini/'+cfg.pkg.name; 65 | cfg.biturl = 'https://bitbucket.org/zakis_/'+cfg.pkg.name; 66 | cfg.npmurl = 'https://npmjs.org/package/'+cfg.pkg.name; 67 | cfg.atmurl = 'http://atmospherejs.com/package/'+cfg.pkg.name; 68 | cfg.examples = grunt.file.expand('examples/*.html'); 69 | cfg.image = grunt.file.expand('images/*.png'); 70 | //console.log(cfg); 71 | return cfg; 72 | }, 73 | markdownOptions: { 74 | gfm: true, 75 | highlight: 'manual', 76 | codeLines: { 77 | before: '
', 78 | after: '
' 79 | } 80 | } 81 | } 82 | } 83 | } 84 | }); 85 | 86 | grunt.registerTask('default', [ 87 | 'clean', 88 | //'jshint', 89 | 'uglify', 90 | 'markdown' 91 | ]); 92 | 93 | grunt.loadNpmTasks('grunt-contrib-clean'); 94 | grunt.loadNpmTasks('grunt-contrib-jshint'); 95 | grunt.loadNpmTasks('grunt-contrib-uglify'); 96 | grunt.loadNpmTasks('grunt-markdown'); 97 | }; -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Bootstrap Confirm Button 2 | ============ 3 | 4 | [![npm version](https://badge.fury.io/js/bootstrap-confirm-button.svg)](http://badge.fury.io/js/bootstrap-confirm-button) 5 | 6 | 7 | A simple button to comfirm a task. 8 | Instead of using rude modals that interrupt a user's workflow, let's use a inline unobtrusive button instead. 9 | Designed especially for devices with small screen. 10 | 11 | **Compatible with Bootstrap 3.3.7!** 12 | 13 | *Ispired by: http://eli.eliandlyndi.com/2011/10/10/using-jquery-to-provide-an-inline-confirmation-on-buttons/* 14 | 15 | [Demo](example.html) 16 | 17 | # Events 18 | 19 | | Event | Data | Description | 20 | | ---------------- | ---- | ---------------------- | 21 | | 'confirm:before' | {} | fired at first click over button | 22 | | 'confirm:expired'| {} | fired after button is auto hidden | 23 | 24 | 25 | # Usage: 26 | 27 | 28 | ```html 29 | 30 | Delete 31 | 32 | ``` 33 | 34 | ```javascript 35 | 36 | $('.btn-delete-item').btsConfirmButton("I'm sure!", function(e) { 37 | console.log('Item deleted!'); 38 | }); 39 | ``` 40 | 41 | **advanced configuration:** 42 | 43 | ```javascript 44 | $('.btn-delete-item').btsConfirmButton({ 45 | msg: "Confirm Deletion", 46 | timeout: 3000, 47 | className: 'btn-danger' 48 | }, function(e) { 49 | console.log('Item deleted!'); 50 | }); 51 | 52 | ``` 53 | 54 | ![Image](https://raw.githubusercontent.com/stefanocudini/bootstrap-confirm-button/master/images/confirm-delete-button.png) 55 | 56 | # Source: 57 | 58 | [Github](https://github.com/stefanocudini/bootstrap-confirm-button) 59 | [NPM](https://npmjs.org/package/bootstrap-confirm-button) 60 | -------------------------------------------------------------------------------- /bootstrap-confirm-button.min.js: -------------------------------------------------------------------------------- 1 | /* 2 | * bootstrap-confirm-button v0.3.2 - 2018-04-03 3 | * 4 | * Copyright 2018 Stefano Cudini 5 | * stefano.cudini@gmail.com 6 | * https://opengeo.tech/ 7 | * 8 | * Licensed under the MIT license. 9 | * 10 | * Demos: 11 | * https://github.com/stefanocudini/bootstrap-confirm-button 12 | * 13 | * Source: 14 | * git@github.com:stefanocudini/bootstrap-confirm-button.git 15 | * 16 | */ 17 | jQuery.fn.btsConfirmButton=function(a,b){return"string"==typeof a?a={msg:a}:"function"==typeof a&&(b=a),b=b||$.noop,a=$.extend({msg:"I'm sure!",classname:"btn-danger",timeout:2e3},a),$(this).each(function(c,d){function e(){g.html(i).removeClass(j.classname).data("confirmed",!1)}var f,g=$(d),h=g.data(),i=g.html(),j=$.extend({},a);for(var k in h){var l,m,n=h[k];(l=k.match(/^confirm(.*)$/))&&(m=l[1].toLowerCase())&&(j[m]=n)}g.data("confirmed",!1),g.on("click.confirm",function(a){a.preventDefault(),g.data("confirmed")?($(a.target).trigger("confirm:after"),b.call(g,a),e()):(g.data("confirmed",!0),$(a.target).trigger("confirm:before",a.target),g.html(j.msg).addClass(j.classname).bind("mouseout.confirm",function(){f=setTimeout(function(){e(),$(a.target).trigger("confirm:expired",a.target)},parseInt(j.timeout))}).bind("mouseover.confirm",function(){clearTimeout(f)}))}).removeClass(j.classname)}),$(this)}; -------------------------------------------------------------------------------- /bootstrap-confirm-button.src.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap Confirm Button 3 | * https://github.com/stefanocudini/bootstrap-confirm-button 4 | * 5 | * Copyright 2017, Stefano Cudini - stefano.cudini@gmail.com 6 | * Licensed under the MIT license. 7 | */ 8 | 9 | jQuery.fn.btsConfirmButton = function(opts, callback) { 10 | 11 | if(typeof opts === 'string') 12 | opts = {msg: opts}; 13 | else if(typeof opts === 'function') 14 | callback = opts; 15 | 16 | callback = callback || $.noop; 17 | 18 | opts = $.extend({ 19 | msg: "I'm sure!", 20 | classname: 'btn-danger', 21 | timeout: 2000 22 | }, opts); 23 | 24 | $(this).each(function(idx, btn) { 25 | var timeoToken, 26 | thisBtn$ = $(btn), 27 | datas = thisBtn$.data(), 28 | oriHtml = thisBtn$.html(), 29 | optsEl = $.extend({}, opts); 30 | 31 | for(var i in datas) { 32 | var opt, type, val = datas[i]; 33 | if( (opt = i.match(/^confirm(.*)$/)) && (type = opt[1].toLowerCase()) ) { 34 | optsEl[type] = val; 35 | } 36 | } 37 | 38 | function resetBtn() { 39 | thisBtn$.html(oriHtml).removeClass(optsEl.classname).data('confirmed',false); 40 | } 41 | 42 | thisBtn$.data('confirmed', false); 43 | thisBtn$.on('click.confirm', function(e) { 44 | e.preventDefault(); 45 | 46 | 47 | if(thisBtn$.data('confirmed')) 48 | { 49 | $(e.target).trigger('confirm:after'); 50 | callback.call(thisBtn$, e); 51 | resetBtn(); 52 | } 53 | else 54 | { 55 | thisBtn$.data('confirmed',true); 56 | 57 | $(e.target).trigger('confirm:before', e.target); 58 | 59 | thisBtn$.html(optsEl.msg).addClass(optsEl.classname).bind('mouseout.confirm', function() { 60 | timeoToken = setTimeout(function() { 61 | resetBtn(); 62 | $(e.target).trigger('confirm:expired', e.target); 63 | }, parseInt(optsEl.timeout)); 64 | }).bind('mouseover.confirm', function() { 65 | clearTimeout(timeoToken); 66 | }); 67 | } 68 | }).removeClass(optsEl.classname); 69 | 70 | }); 71 | 72 | return $(this); 73 | }; 74 | -------------------------------------------------------------------------------- /examples/simple.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example 6 | 7 | 8 | 9 |
10 | 11 |

12 | Bootstrap Confirm Button: Example 13 |

14 |
15 |
16 | 17 |
    18 |
  • 19 | Item One 20 | × 21 |
  • 22 |
  • 23 | Item Two 24 | × 25 |
  • 26 |
27 | 28 |
    29 |
  • 30 | Item Three 31 | 34 |
  • 35 |
  • 36 | Item Four 37 | 40 |
  • 41 |
42 | 43 | 44 | 45 |
46 |
47 |
48 | 49 | 50 | 51 | 52 | 81 | 82 | -------------------------------------------------------------------------------- /images/confirm-delete-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stefanocudini/bootstrap-confirm-button/a0bd2974dbd1c540d03c2bdcef024a9692360efb/images/confirm-delete-button.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | bootstrap confirm button 5 | 6 | 95 | 96 | 97 | 98 | 99 |

bootstrap confirm button

100 | 101 |
102 | A simple button to confirm a task, inline unobtrusive button confirmation 103 |
104 | 105 |
106 |
107 | 108 |
109 | 128 |
129 |

Code repositories

130 | Github.com 131 |
132 | Node Packaged Module 133 |
134 | Atmosphere MeteorJS 135 |
136 | 137 |

Homepage

138 | https://github.com/stefanocudini/bootstrap-confirm-button 139 |
140 | 141 |

Download

142 | 145 |
146 |
147 |

Examples

148 | 153 |
154 | 155 |
156 | 157 |
158 | 159 | 160 | Github 161 | 162 |
163 | For questions and bugs I recommend you to create New Issue on Github repository.
164 |
165 | This is a micro discussion area for methods of implementation.
166 |
167 | 168 | 169 | 170 | 171 | 172 | -------------------------------------------------------------------------------- /index.tmpl.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | <%=title%> 5 | 6 | 95 | 96 | 97 | 98 | 99 |

<%=title%>

100 | 101 |
102 | <%=pkg.description%> 103 |
104 | 105 |
106 |
107 | 108 |
109 | 128 |
129 |

Code repositories

130 | Github.com 131 |
132 | Node Packaged Module 133 |
134 | Atmosphere MeteorJS 135 |
136 | 137 |

Homepage

138 | <%=pkg.homepage%> 139 |
140 | 141 |

Download

142 | 145 |
146 |
147 |

Examples

148 | 153 |
154 | 155 |
156 | 157 |
158 | 159 | 160 | Github 161 | 162 |
163 | For questions and bugs I recommend you to create New Issue on Github repository.
164 |
165 | This is a micro discussion area for methods of implementation.
166 |
167 | 168 | 169 | 170 | -------------------------------------------------------------------------------- /license.txt: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Duy Anh Nguyen 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bootstrap-confirm-button", 3 | "version": "0.3.4", 4 | "description": "A simple button to confirm a task, inline unobtrusive button confirmation", 5 | "main": "bootstrap-confirm-button.src.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "git@github.com:stefanocudini/bootstrap-confirm-button.git" 9 | }, 10 | "homepage": "https://opengeo.tech/bootstrap-confirm-button", 11 | "author": { 12 | "name": "Stefano Cudini", 13 | "email": "stefano.cudini@gmail.com", 14 | "url": "https://opengeo.tech/" 15 | }, 16 | "license": "MIT", 17 | "keywords": [ 18 | "jquery", 19 | "bootstrap", 20 | "front-end" 21 | ], 22 | "dependencies": { 23 | "jquery": "*", 24 | "bootstrap": "3.3.7" 25 | }, 26 | "devDependencies": { 27 | "grunt": "^0.4.5", 28 | "grunt-cli": "^0.1.13", 29 | "grunt-contrib-clean": "^0.5.0", 30 | "grunt-contrib-jshint": "^0.10.0", 31 | "grunt-contrib-uglify": "^0.5.0", 32 | "grunt-markdown": "^0.6.1" 33 | } 34 | } 35 | --------------------------------------------------------------------------------