data-confirm-modal 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA1:
3
+ metadata.gz: 51553390f46b33fab5ef7c510383311e3e4b0c16
4
+ data.tar.gz: 09d08afd86829132cf63712585b2811257f9d1e3
5
+ SHA512:
6
+ metadata.gz: 8bd8a34f895f5c63f91a311b09112b84e76f015c3e25badcd22be4206711a24bef5f8a8706af1cdd7830d02f453e6fc271e352c59c2951324ef284922b084e74
7
+ data.tar.gz: da1dfe1a0a3675cd235da276e51ad9d931c81c5e2bdd8adb0a69b8dcf7d5145bef0dfb8458dd2672d4fea0c7d3dfe5a447f84123d55d8b7853164adfb3eba1ff
@@ -0,0 +1,17 @@
1
+ *.gem
2
+ *.rbc
3
+ .bundle
4
+ .config
5
+ .yardoc
6
+ Gemfile.lock
7
+ InstalledFiles
8
+ _yardoc
9
+ coverage
10
+ doc/
11
+ lib/bundler/man
12
+ pkg
13
+ rdoc
14
+ spec/reports
15
+ test/tmp
16
+ test/version_tmp
17
+ tmp
data/Gemfile ADDED
@@ -0,0 +1,3 @@
1
+ source 'https://rubygems.org'
2
+
3
+ gemspec
data/LICENSE ADDED
@@ -0,0 +1,22 @@
1
+ Copyright (c) 2013 Marcello Barnaba <vjt@openssl.it>
2
+
3
+ MIT License
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining
6
+ a copy of this software and associated documentation files (the
7
+ "Software"), to deal in the Software without restriction, including
8
+ without limitation the rights to use, copy, modify, merge, publish,
9
+ distribute, sublicense, and/or sell copies of the Software, and to
10
+ permit persons to whom the Software is furnished to do so, subject to
11
+ the following conditions:
12
+
13
+ The above copyright notice and this permission notice shall be
14
+ included in all copies or substantial portions of the Software.
15
+
16
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
17
+ EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
18
+ MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
19
+ NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
20
+ LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
21
+ OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
22
+ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
@@ -0,0 +1,129 @@
1
+ # Data-Confirm Modal
2
+
3
+ Uses [Bootstrap's modals](http://twitter.github.io/bootstrap/javascript.html#modals)
4
+ in place of the browser's builtin `confirm()` API for links generated through Rails'
5
+ helpers with the `:confirm` option.
6
+
7
+ Any link with the `data-confirm` attribute will trigger a Bootstrap modal.
8
+
9
+ HTML in the modal supported, and also the ability to have the user input a
10
+ certain value, for extra willingness confirmation (inspired by GitHub's
11
+ "delete repository" function).
12
+
13
+ ## Installation
14
+
15
+ Add this line to your application's Gemfile:
16
+
17
+ gem 'data-confirm-modal', github: 'ifad/data-confirm-modal'
18
+
19
+ if you are stuck on Bootstrap 2.3, use the `bootstrap2` branch:
20
+
21
+ gem 'data-confirm-modal', github: 'ifad/data-confirm-modal', branch: 'bootstrap2'
22
+
23
+ Then execute:
24
+
25
+ $ bundle
26
+
27
+ And then require the Javascript from your `application.js`:
28
+
29
+ //= require data-confirm-modal
30
+
31
+ ## Usage
32
+
33
+ ### With Rails
34
+
35
+ By default, the Gem's Javascript overrides Rails' [data-confirm behaviour][]
36
+ for you, with no change required to your code. The modal is applicable to
37
+ `<a>`, `<button>` and `<input[submit]>` elements by default.
38
+
39
+ Example:
40
+
41
+ <%= link_to 'Delete', data: {confirm: 'Are you sure?'} %>
42
+
43
+ The modal's title will be get from the link's `title` attribute value. The
44
+ modal text will be taken from the `data-confirm` value. Multiple paragraphs
45
+ are created automatically from two newlines (`\n\n`).
46
+
47
+ The modal's 'confirm' button text can be customized using the `data-commit`
48
+ attribute.
49
+
50
+ <%= link_to 'Delete', data: {confirm: 'Are you sure?', commit: 'Sure!'} %>
51
+
52
+ Add a `data-verify` attribute to your input if you want an extra confirmation
53
+ from the user. The modal will contain an extra text input, and the user will be
54
+ asked to type the verification value before being allowed to proceed.
55
+
56
+ <%= link_to 'Delete', data: {confirm: 'Are you sure?', verify: 'Foo', verify_text: 'Type "Foo" to confirm'} %>
57
+
58
+ You can set global setting using `dataConfirmModal.setDefaults`, for example:
59
+
60
+ dataConfirmModal.setDefaults({
61
+ title: 'Confirm your action',
62
+ commit: 'Continue',
63
+ cancel: 'Cancel'
64
+ });
65
+
66
+ To restore default settings use `dataConfirmModal.restoreDefaults()`.
67
+
68
+ [data-confirm-behaviour]: http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html
69
+
70
+ ### Without Rails, with data attributes
71
+
72
+ Given an element with `data-confirm` attributes in place, such as
73
+
74
+ <a id="foo" href="#" data-confirm="Really do this?" data-commit="Do it" data-cancel="Not really"/>
75
+
76
+ you can then invoke `.confirmModal()` on it using:
77
+
78
+ $('#foo').confirmModal();
79
+
80
+ that'll display the confirmation modal. If the user confirms, then the `#foo`
81
+ link will receive a `click` event.
82
+
83
+ ### Without Rails, without data attributes
84
+
85
+ Use `dataConfirmModal.confirm()` passing any of the supported options, and pass
86
+ an `onConfirm` and `onCancel` callbacks that'll be invoked when the user clicks
87
+ the confirm or the cancel buttons.
88
+
89
+ dataConfirmModal.confirm({
90
+ title: 'Are you sure?',
91
+ text: 'Really do this?',
92
+ commit: 'Yes do it',
93
+ cancel: 'Not really',
94
+ zIindex: 10099,
95
+ onConfirm: function() { alert('confirmed') },
96
+ onCancel: function() { alert('cancelled') }
97
+ });
98
+
99
+ A live jsfiddle example is [available here](http://jsfiddle.net/t0m7ayr3/).
100
+
101
+ ### Modal Options
102
+
103
+ The default [bootstrap modal options](http://getbootstrap.com/javascript/#modals-options)
104
+ can be passed either via JavaScript or through data attributes.
105
+
106
+ $('#foo').confirmModal({backdrop: 'static', keyboard: false});
107
+
108
+ or
109
+
110
+ <a href="#" data-confirm="Really?" data-backdrop="static" data-keyboard="false">
111
+
112
+ ## Authors
113
+
114
+ * Marcello Barnaba ([@vjt](https://github.com/vjt))
115
+ * LLeir Borras Metje ([@lleirborras](https://github.com/lleirborras))
116
+ * The Open Source [World](https://github.com/ifad/data-confirm-modal/graphs/contributors)
117
+
118
+ ## Background
119
+
120
+ Spinned off a corporate [IFAD](http://github.com/ifad/) application in which
121
+ an user did too much damage because the confirm wasn't *THAT* explicit ... ;-).
122
+
123
+ ## Contributing
124
+
125
+ 1. Fork it
126
+ 2. Create your feature branch (`git checkout -b my-new-feature`)
127
+ 3. Commit your changes (`git commit -am 'Added some feature'`)
128
+ 4. Push to the branch (`git push origin my-new-feature`)
129
+ 5. Create new Pull Request
@@ -0,0 +1,2 @@
1
+ require 'bundler'
2
+ Bundler::GemHelper.install_tasks
@@ -0,0 +1,21 @@
1
+ # -*- encoding: utf-8 -*-
2
+ require File.expand_path('../lib/data-confirm-modal/version', __FILE__)
3
+
4
+ Gem::Specification.new do |s|
5
+ s.name = "data-confirm-modal"
6
+ s.version = DataConfirmModal::VERSION
7
+ s.platform = Gem::Platform::RUBY
8
+ s.authors = ["Marcello Barnaba"]
9
+ s.email = ["vjt@openssl.it"]
10
+ s.homepage = "http://github.com/ifad/data-confirm-modal"
11
+ s.summary = "Use bootstrap modals with Rails' UJS data-confirm"
12
+ s.description = "This gem overrides Rails' UJS behaviour to open up a Bootstrap Modal instead of the browser's built in confirm() dialog"
13
+ s.licenses = "MIT"
14
+
15
+ s.required_rubygems_version = ">= 1.3.6"
16
+
17
+ s.add_dependency 'railties', '>= 3.0'
18
+
19
+ s.files = `git ls-files`.split("\n")
20
+ s.require_path = 'lib'
21
+ end
@@ -0,0 +1,2 @@
1
+ require 'data-confirm-modal/engine'
2
+ require 'data-confirm-modal/version'
@@ -0,0 +1,4 @@
1
+ module DataConfirmModal
2
+ class Engine < ::Rails::Engine
3
+ end
4
+ end
@@ -0,0 +1,3 @@
1
+ module DataConfirmModal
2
+ VERSION = '1.1.1'
3
+ end
@@ -0,0 +1,282 @@
1
+ /*
2
+ * Implements a user-facing modal confirmation when link has a
3
+ * "data-confirm" attribute using bootstrap's modals. MIT license.
4
+ *
5
+ * - vjt@openssl.it Tue Jul 2 18:45:15 CEST 2013
6
+ */
7
+ (function ($) {
8
+
9
+ /**
10
+ * Builds the markup for a [Bootstrap modal](http://twitter.github.io/bootstrap/javascript.html#modals)
11
+ * for the given `element`. Uses the following `data-` parameters to
12
+ * customize it:
13
+ *
14
+ * * `data-confirm`: Contains the modal body text. HTML is allowed.
15
+ * Separate multiple paragraphs using \n\n.
16
+ * * `data-commit`: The 'confirm' button text. "Confirm" by default.
17
+ * * `data-cancel`: The 'cancel' button text. "Cancel" by default.
18
+ * * `data-verify`: Adds a text input in which the user has to input
19
+ * the text in this attribute value for the 'confirm'
20
+ * button to be clickable. Optional.
21
+ * * `data-verify-text`: Adds a label for the data-verify input. Optional
22
+ * * `data-focus`: Define focused input. Supported values are
23
+ * 'cancel' or 'commit', 'cancel' is default for
24
+ * data-method DELETE, 'commit' for all others.
25
+ *
26
+ * You can set global setting using `dataConfirmModal.setDefaults`, for example:
27
+ *
28
+ * dataConfirmModal.setDefaults({
29
+ * title: 'Confirm your action',
30
+ * commit: 'Continue',
31
+ * cancel: 'Cancel',
32
+ * fade: false,
33
+ * verifyClass: 'form-control',
34
+ * });
35
+ *
36
+ */
37
+
38
+ var defaults = {
39
+ title: 'Are you sure?',
40
+ commit: 'Confirm',
41
+ commitClass: 'btn-danger',
42
+ cancel: 'Cancel',
43
+ cancelClass: 'btn-default',
44
+ fade: true,
45
+ verifyClass: 'form-control',
46
+ elements: ['a[data-confirm]', 'button[data-confirm]', 'input[type=submit][data-confirm]'],
47
+ focus: 'commit',
48
+ zIndex: 1050,
49
+ modalClass: false,
50
+ show: true
51
+ };
52
+
53
+ var settings;
54
+
55
+ window.dataConfirmModal = {
56
+ setDefaults: function (newSettings) {
57
+ settings = $.extend(settings, newSettings);
58
+ },
59
+
60
+ restoreDefaults: function () {
61
+ settings = $.extend({}, defaults);
62
+ },
63
+
64
+ confirm: function (options) {
65
+ // Build an ephemeral modal
66
+ //
67
+ var modal = buildModal(options);
68
+
69
+ modal.spawn();
70
+ modal.on('hidden.bs.modal', function () {
71
+ modal.remove();
72
+ });
73
+
74
+ modal.find('.commit').on('click', function () {
75
+ if (options.onConfirm && options.onConfirm.call)
76
+ options.onConfirm.call();
77
+
78
+ modal.modal('hide');
79
+ });
80
+
81
+ modal.find('.cancel').on('click', function () {
82
+ if (options.onCancel && options.onCancel.call)
83
+ options.onCancel.call();
84
+
85
+ modal.modal('hide');
86
+ });
87
+ }
88
+ };
89
+
90
+ dataConfirmModal.restoreDefaults();
91
+
92
+ var buildElementModal = function (element) {
93
+ var options = {
94
+ title: element.attr('title') || element.data('original-title'),
95
+ text: element.data('confirm'),
96
+ focus: element.data('focus'),
97
+ method: element.data('method'),
98
+ commit: element.data('commit'),
99
+ commitClass: element.data('commit-class'),
100
+ cancel: element.data('cancel'),
101
+ cancelClass: element.data('cancel-class'),
102
+ remote: element.data('remote'),
103
+ verify: element.data('verify'),
104
+ verifyRegexp: element.data('verify-regexp'),
105
+ verifyLabel: element.data('verify-text'),
106
+ verifyRegexpCaseInsensitive: element.data('verify-regexp-caseinsensitive'),
107
+ backdrop: element.data('backdrop'),
108
+ keyboard: element.data('keyboard'),
109
+ show: element.data('show')
110
+ };
111
+
112
+ var modal = buildModal(options);
113
+
114
+ modal.data('confirmed', false);
115
+ modal.find('.commit').on('click', function () {
116
+ modal.data('confirmed', true);
117
+ element.trigger('click');
118
+ modal.modal('hide');
119
+ });
120
+
121
+ return modal;
122
+ }
123
+
124
+ var buildModal = function (options) {
125
+ var id = 'confirm-modal-' + String(Math.random()).slice(2, -1);
126
+ var fade = settings.fade ? 'fade' : '';
127
+ var modalClass = settings.modalClass ? settings.modalClass : '';
128
+
129
+ var modal = $(
130
+ '<div id="'+id+'" class="modal '+fade+' '+modalClass+'" tabindex="-1" role="dialog" aria-labelledby="'+id+'Label" aria-hidden="true">' +
131
+ '<div class="modal-dialog">' +
132
+ '<div class="modal-content">' +
133
+ '<div class="modal-header">' +
134
+ '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
135
+ '<h4 id="'+id+'Label" class="modal-title"></h4> ' +
136
+ '</div>' +
137
+ '<div class="modal-body"></div>' +
138
+ '<div class="modal-footer">' +
139
+ '<button class="btn cancel" data-dismiss="modal" aria-hidden="true"></button>' +
140
+ '<button class="btn commit"></button>' +
141
+ '</div>'+
142
+ '</div>'+
143
+ '</div>'+
144
+ '</div>'
145
+ );
146
+
147
+ // Make sure it's always the top zindex
148
+ var highest = current = settings.zIndex;
149
+ $('.modal.in').not('#'+id).each(function() {
150
+ current = parseInt($(this).css('z-index'), 10);
151
+ if(current > highest) {
152
+ highest = current
153
+ }
154
+ });
155
+ modal.css('z-index', parseInt(highest) + 1);
156
+
157
+ modal.find('.modal-title').text(options.title || settings.title);
158
+
159
+ var body = modal.find('.modal-body');
160
+
161
+ $.each((options.text||'').split(/\n{2}/), function (i, piece) {
162
+ body.append($('<p/>').html(piece));
163
+ });
164
+
165
+ var commit = modal.find('.commit');
166
+ commit.text(options.commit || settings.commit);
167
+ commit.addClass(options.commitClass || settings.commitClass);
168
+
169
+ var cancel = modal.find('.cancel');
170
+ cancel.text(options.cancel || settings.cancel);
171
+ cancel.addClass(options.cancelClass || settings.cancelClass);
172
+
173
+ if (options.remote) {
174
+ commit.attr('data-dismiss', 'modal');
175
+ }
176
+
177
+ if (options.verify || options.verifyRegexp) {
178
+ commit.prop('disabled', true);
179
+
180
+ var isMatch;
181
+ if (options.verifyRegexp) {
182
+ var caseInsensitive = options.verifyRegexpCaseInsensitive;
183
+ var regexp = options.verifyRegexp;
184
+ var re = new RegExp(regexp, caseInsensitive ? 'i' : '');
185
+
186
+ isMatch = function (input) { return input.match(re) };
187
+ } else {
188
+ isMatch = function (input) { return options.verify == input };
189
+ }
190
+
191
+ var verification = $('<input/>', {"type": 'text', "class": settings.verifyClass}).on('keyup', function () {
192
+ commit.prop('disabled', !isMatch($(this).val()));
193
+ });
194
+
195
+ modal.on('shown.bs.modal', function () {
196
+ verification.focus();
197
+ });
198
+
199
+ modal.on('hidden.bs.modal', function () {
200
+ verification.val('').trigger('keyup');
201
+ });
202
+
203
+ if (options.verifyLabel)
204
+ body.append($('<p>', {text: options.verifyLabel}))
205
+
206
+ body.append(verification);
207
+ }
208
+
209
+ var focus_element;
210
+ if (options.focus) {
211
+ focus_element = options.focus;
212
+ } else if (options.method == 'delete') {
213
+ focus_element = 'cancel'
214
+ } else {
215
+ focus_element = settings.focus;
216
+ }
217
+ focus_element = modal.find('.' + focus_element);
218
+
219
+ modal.on('shown.bs.modal', function () {
220
+ focus_element.focus();
221
+ });
222
+
223
+ $('body').append(modal);
224
+
225
+ modal.spawn = function() {
226
+ return modal.modal({
227
+ backdrop: options.backdrop,
228
+ keyboard: options.keyboard,
229
+ show: options.show
230
+ });
231
+ };
232
+
233
+ return modal;
234
+ };
235
+
236
+
237
+ /**
238
+ * Returns a modal already built for the given element or builds a new one,
239
+ * caching it into the element's `confirm-modal` data attribute.
240
+ */
241
+ var getModal = function (element) {
242
+ var modal = element.data('confirm-modal') || buildElementModal(element);
243
+
244
+ if (modal && !element.data('confirm-modal'))
245
+ element.data('confirm-modal', modal);
246
+
247
+ return modal;
248
+ };
249
+
250
+ $.fn.confirmModal = function () {
251
+ getModal($(this)).spawn();
252
+
253
+ return this;
254
+ };
255
+
256
+ if ($.rails) {
257
+ /**
258
+ * Attaches to the Rails' UJS adapter 'confirm' event on links having a
259
+ * `data-confirm` attribute. Temporarily overrides the `$.rails.confirm`
260
+ * function with an anonymous one that returns the 'confirmed' status of
261
+ * the modal.
262
+ *
263
+ * A modal is considered 'confirmed' when an user has successfully clicked
264
+ * the 'confirm' button in it.
265
+ */
266
+ $(document).delegate(settings.elements.join(', '), 'confirm', function() {
267
+ var element = $(this), modal = getModal(element);
268
+ var confirmed = modal.data('confirmed');
269
+
270
+ if (!confirmed && !modal.is(':visible')) {
271
+ modal.spawn();
272
+
273
+ var confirm = $.rails.confirm;
274
+ $.rails.confirm = function () { return modal.data('confirmed'); }
275
+ modal.on('hide', function () { $.rails.confirm = confirm; });
276
+ }
277
+
278
+ return confirmed;
279
+ });
280
+ }
281
+
282
+ })(jQuery);
metadata ADDED
@@ -0,0 +1,69 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: data-confirm-modal
3
+ version: !ruby/object:Gem::Version
4
+ version: 1.1.1
5
+ platform: ruby
6
+ authors:
7
+ - Marcello Barnaba
8
+ autorequire:
9
+ bindir: bin
10
+ cert_chain: []
11
+ date: 2016-04-27 00:00:00.000000000 Z
12
+ dependencies:
13
+ - !ruby/object:Gem::Dependency
14
+ name: railties
15
+ requirement: !ruby/object:Gem::Requirement
16
+ requirements:
17
+ - - ">="
18
+ - !ruby/object:Gem::Version
19
+ version: '3.0'
20
+ type: :runtime
21
+ prerelease: false
22
+ version_requirements: !ruby/object:Gem::Requirement
23
+ requirements:
24
+ - - ">="
25
+ - !ruby/object:Gem::Version
26
+ version: '3.0'
27
+ description: This gem overrides Rails' UJS behaviour to open up a Bootstrap Modal
28
+ instead of the browser's built in confirm() dialog
29
+ email:
30
+ - vjt@openssl.it
31
+ executables: []
32
+ extensions: []
33
+ extra_rdoc_files: []
34
+ files:
35
+ - ".gitignore"
36
+ - Gemfile
37
+ - LICENSE
38
+ - README.md
39
+ - Rakefile
40
+ - data-confirm-modal.gemspec
41
+ - lib/data-confirm-modal.rb
42
+ - lib/data-confirm-modal/engine.rb
43
+ - lib/data-confirm-modal/version.rb
44
+ - vendor/assets/javascripts/data-confirm-modal.js
45
+ homepage: http://github.com/ifad/data-confirm-modal
46
+ licenses:
47
+ - MIT
48
+ metadata: {}
49
+ post_install_message:
50
+ rdoc_options: []
51
+ require_paths:
52
+ - lib
53
+ required_ruby_version: !ruby/object:Gem::Requirement
54
+ requirements:
55
+ - - ">="
56
+ - !ruby/object:Gem::Version
57
+ version: '0'
58
+ required_rubygems_version: !ruby/object:Gem::Requirement
59
+ requirements:
60
+ - - ">="
61
+ - !ruby/object:Gem::Version
62
+ version: 1.3.6
63
+ requirements: []
64
+ rubyforge_project:
65
+ rubygems_version: 2.5.1
66
+ signing_key:
67
+ specification_version: 4
68
+ summary: Use bootstrap modals with Rails' UJS data-confirm
69
+ test_files: []