data-confirm-modal 1.1.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 51553390f46b33fab5ef7c510383311e3e4b0c16
+  data.tar.gz: 09d08afd86829132cf63712585b2811257f9d1e3
+SHA512:
+  metadata.gz: 8bd8a34f895f5c63f91a311b09112b84e76f015c3e25badcd22be4206711a24bef5f8a8706af1cdd7830d02f453e6fc271e352c59c2951324ef284922b084e74
+  data.tar.gz: da1dfe1a0a3675cd235da276e51ad9d931c81c5e2bdd8adb0a69b8dcf7d5145bef0dfb8458dd2672d4fea0c7d3dfe5a447f84123d55d8b7853164adfb3eba1ff

data/.gitignore

@@ -0,0 +1,17 @@
+*.gem
+*.rbc
+.bundle
+.config
+.yardoc
+Gemfile.lock
+InstalledFiles
+_yardoc
+coverage
+doc/
+lib/bundler/man
+pkg
+rdoc
+spec/reports
+test/tmp
+test/version_tmp
+tmp

data/Gemfile

@@ -0,0 +1,3 @@
+source 'https://rubygems.org'
+
+gemspec

data/LICENSE

@@ -0,0 +1,22 @@
+Copyright (c) 2013 Marcello Barnaba <vjt@openssl.it>
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,129 @@
+# Data-Confirm Modal
+
+Uses [Bootstrap's modals](http://twitter.github.io/bootstrap/javascript.html#modals)
+in place of the browser's builtin `confirm()` API for links generated through Rails'
+helpers with the `:confirm` option.
+
+Any link with the `data-confirm` attribute will trigger a Bootstrap modal.
+
+HTML in the modal supported, and also the ability to have the user input a
+certain value, for extra willingness confirmation (inspired by GitHub's
+"delete repository" function).
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+    gem 'data-confirm-modal', github: 'ifad/data-confirm-modal'
+
+if you are stuck on Bootstrap 2.3, use the `bootstrap2` branch:
+
+    gem 'data-confirm-modal', github: 'ifad/data-confirm-modal', branch: 'bootstrap2'
+
+Then execute:
+
+    $ bundle
+
+And then require the Javascript from your `application.js`:
+
+    //= require data-confirm-modal
+
+## Usage
+
+### With Rails
+
+By default, the Gem's Javascript overrides Rails' [data-confirm behaviour][]
+for you, with no change required to your code. The modal is applicable to
+`<a>`, `<button>` and `<input[submit]>`  elements by default.
+
+Example:
+
+    <%= link_to 'Delete', data: {confirm: 'Are you sure?'} %>
+
+The modal's title will be get from the link's `title` attribute value. The
+modal text will be taken from the `data-confirm` value. Multiple paragraphs
+are created automatically from two newlines (`\n\n`).
+
+The modal's 'confirm' button text can be customized using the `data-commit`
+attribute.
+
+    <%= link_to 'Delete', data: {confirm: 'Are you sure?', commit: 'Sure!'} %>
+
+Add a `data-verify` attribute to your input if you want an extra confirmation
+from the user. The modal will contain an extra text input, and the user will be
+asked to type the verification value before being allowed to proceed.
+
+    <%= link_to 'Delete', data: {confirm: 'Are you sure?', verify: 'Foo', verify_text: 'Type "Foo" to confirm'} %>
+
+You can set global setting using `dataConfirmModal.setDefaults`, for example:
+
+    dataConfirmModal.setDefaults({
+      title: 'Confirm your action',
+      commit: 'Continue',
+      cancel: 'Cancel'
+    });
+
+To restore default settings use `dataConfirmModal.restoreDefaults()`.
+
+[data-confirm-behaviour]: http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html
+
+### Without Rails, with data attributes
+
+Given an element with `data-confirm` attributes in place, such as
+
+    <a id="foo" href="#" data-confirm="Really do this?" data-commit="Do it" data-cancel="Not really"/>
+
+you can then invoke `.confirmModal()` on it using:
+
+    $('#foo').confirmModal();
+
+that'll display the confirmation modal. If the user confirms, then the `#foo`
+link will receive a `click` event.
+
+### Without Rails, without data attributes
+
+Use `dataConfirmModal.confirm()` passing any of the supported options, and pass
+an `onConfirm` and `onCancel` callbacks that'll be invoked when the user clicks
+the confirm or the cancel buttons.
+
+    dataConfirmModal.confirm({
+      title: 'Are you sure?',
+      text: 'Really do this?',
+      commit: 'Yes do it',
+      cancel: 'Not really',
+      zIindex: 10099,
+      onConfirm: function() { alert('confirmed') },
+      onCancel:  function() { alert('cancelled') }
+    });
+
+A live jsfiddle example is [available here](http://jsfiddle.net/t0m7ayr3/).
+
+### Modal Options
+
+The default [bootstrap modal options](http://getbootstrap.com/javascript/#modals-options)
+can be passed either via JavaScript or through data attributes.
+
+     $('#foo').confirmModal({backdrop: 'static', keyboard: false});
+
+or
+
+     <a href="#" data-confirm="Really?" data-backdrop="static" data-keyboard="false">
+
+## Authors
+
+* Marcello Barnaba ([@vjt](https://github.com/vjt))
+* LLeir Borras Metje ([@lleirborras](https://github.com/lleirborras))
+* The Open Source [World](https://github.com/ifad/data-confirm-modal/graphs/contributors)
+
+## Background
+
+Spinned off a corporate [IFAD](http://github.com/ifad/) application in which
+an user did too much damage because the confirm wasn't *THAT* explicit ... ;-).
+
+## Contributing
+
+1. Fork it
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Added some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create new Pull Request

data/Rakefile

@@ -0,0 +1,2 @@
+require 'bundler'
+Bundler::GemHelper.install_tasks

data/data-confirm-modal.gemspec

@@ -0,0 +1,21 @@
+# -*- encoding: utf-8 -*-
+require File.expand_path('../lib/data-confirm-modal/version', __FILE__)
+
+Gem::Specification.new do |s|
+  s.name        = "data-confirm-modal"
+  s.version     = DataConfirmModal::VERSION
+  s.platform    = Gem::Platform::RUBY
+  s.authors     = ["Marcello Barnaba"]
+  s.email       = ["vjt@openssl.it"]
+  s.homepage    = "http://github.com/ifad/data-confirm-modal"
+  s.summary     = "Use bootstrap modals with Rails' UJS data-confirm"
+  s.description = "This gem overrides Rails' UJS behaviour to open up a Bootstrap Modal instead of the browser's built in confirm() dialog"
+  s.licenses    = "MIT"
+
+  s.required_rubygems_version = ">= 1.3.6"
+
+  s.add_dependency 'railties', '>= 3.0'
+
+  s.files        = `git ls-files`.split("\n")
+  s.require_path = 'lib'
+end

data/lib/data-confirm-modal.rb

@@ -0,0 +1,2 @@
+require 'data-confirm-modal/engine'
+require 'data-confirm-modal/version'

data/lib/data-confirm-modal/engine.rb

@@ -0,0 +1,4 @@
+module DataConfirmModal
+  class  Engine < ::Rails::Engine
+  end
+end

data/lib/data-confirm-modal/version.rb

@@ -0,0 +1,3 @@
+module DataConfirmModal
+  VERSION = '1.1.1'
+end

data/vendor/assets/javascripts/data-confirm-modal.js

@@ -0,0 +1,282 @@
+/*
+ * Implements a user-facing modal confirmation when link has a
+ * "data-confirm" attribute using bootstrap's modals. MIT license.
+ *
+ *   - vjt@openssl.it  Tue Jul  2 18:45:15 CEST 2013
+ */
+(function ($) {
+
+  /**
+   * Builds the markup for a [Bootstrap modal](http://twitter.github.io/bootstrap/javascript.html#modals)
+   * for the given `element`. Uses the following `data-` parameters to
+   * customize it:
+   *
+   *  * `data-confirm`: Contains the modal body text. HTML is allowed.
+   *                    Separate multiple paragraphs using \n\n.
+   *  * `data-commit`:  The 'confirm' button text. "Confirm" by default.
+   *  * `data-cancel`:  The 'cancel' button text. "Cancel" by default.
+   *  * `data-verify`:  Adds a text input in which the user has to input
+   *                    the text in this attribute value for the 'confirm'
+   *                    button to be clickable. Optional.
+   *  * `data-verify-text`:  Adds a label for the data-verify input. Optional
+   *  * `data-focus`:   Define focused input. Supported values are
+   *                    'cancel' or 'commit', 'cancel' is default for
+   *                    data-method DELETE, 'commit' for all others.
+   *
+   * You can set global setting using `dataConfirmModal.setDefaults`, for example:
+   *
+   *    dataConfirmModal.setDefaults({
+   *      title: 'Confirm your action',
+   *      commit: 'Continue',
+   *      cancel: 'Cancel',
+   *      fade:   false,
+   *      verifyClass: 'form-control',
+   *    });
+   *
+   */
+
+  var defaults = {
+    title: 'Are you sure?',
+    commit: 'Confirm',
+    commitClass: 'btn-danger',
+    cancel: 'Cancel',
+    cancelClass: 'btn-default',
+    fade: true,
+    verifyClass: 'form-control',
+    elements: ['a[data-confirm]', 'button[data-confirm]', 'input[type=submit][data-confirm]'],
+    focus: 'commit',
+    zIndex: 1050,
+    modalClass: false,
+    show: true
+  };
+
+  var settings;
+
+  window.dataConfirmModal = {
+    setDefaults: function (newSettings) {
+      settings = $.extend(settings, newSettings);
+    },
+
+    restoreDefaults: function () {
+      settings = $.extend({}, defaults);
+    },
+
+    confirm: function (options) {
+      // Build an ephemeral modal
+      //
+      var modal = buildModal(options);
+
+      modal.spawn();
+      modal.on('hidden.bs.modal', function () {
+        modal.remove();
+      });
+
+      modal.find('.commit').on('click', function () {
+        if (options.onConfirm && options.onConfirm.call)
+          options.onConfirm.call();
+
+        modal.modal('hide');
+      });
+
+      modal.find('.cancel').on('click', function () {
+        if (options.onCancel && options.onCancel.call)
+          options.onCancel.call();
+
+        modal.modal('hide');
+      });
+    }
+  };
+
+  dataConfirmModal.restoreDefaults();
+
+  var buildElementModal = function (element) {
+    var options = {
+      title:        element.attr('title') || element.data('original-title'),
+      text:         element.data('confirm'),
+      focus:        element.data('focus'),
+      method:       element.data('method'),
+      commit:       element.data('commit'),
+      commitClass:  element.data('commit-class'),
+      cancel:       element.data('cancel'),
+      cancelClass:  element.data('cancel-class'),
+      remote:       element.data('remote'),
+      verify:       element.data('verify'),
+      verifyRegexp: element.data('verify-regexp'),
+      verifyLabel:  element.data('verify-text'),
+      verifyRegexpCaseInsensitive: element.data('verify-regexp-caseinsensitive'),
+      backdrop:     element.data('backdrop'),
+      keyboard:     element.data('keyboard'),
+      show:         element.data('show')
+    };
+
+    var modal = buildModal(options);
+
+    modal.data('confirmed', false);
+    modal.find('.commit').on('click', function () {
+      modal.data('confirmed', true);
+      element.trigger('click');
+      modal.modal('hide');
+    });
+
+    return modal;
+  }
+
+  var buildModal = function (options) {
+    var id = 'confirm-modal-' + String(Math.random()).slice(2, -1);
+    var fade = settings.fade ? 'fade' : '';
+    var modalClass = settings.modalClass ? settings.modalClass : '';
+
+    var modal = $(
+      '<div id="'+id+'" class="modal '+fade+' '+modalClass+'" tabindex="-1" role="dialog" aria-labelledby="'+id+'Label" aria-hidden="true">' +
+        '<div class="modal-dialog">' +
+          '<div class="modal-content">' +
+            '<div class="modal-header">' +
+              '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
+              '<h4 id="'+id+'Label" class="modal-title"></h4> ' +
+            '</div>' +
+            '<div class="modal-body"></div>' +
+            '<div class="modal-footer">' +
+              '<button class="btn cancel" data-dismiss="modal" aria-hidden="true"></button>' +
+              '<button class="btn commit"></button>' +
+            '</div>'+
+          '</div>'+
+        '</div>'+
+      '</div>'
+    );
+
+    // Make sure it's always the top zindex
+    var highest = current = settings.zIndex;
+    $('.modal.in').not('#'+id).each(function() {
+      current = parseInt($(this).css('z-index'), 10);
+      if(current > highest) {
+        highest = current
+      }
+    });
+    modal.css('z-index', parseInt(highest) + 1);
+
+    modal.find('.modal-title').text(options.title || settings.title);
+
+    var body = modal.find('.modal-body');
+
+    $.each((options.text||'').split(/\n{2}/), function (i, piece) {
+      body.append($('<p/>').html(piece));
+    });
+
+    var commit = modal.find('.commit');
+    commit.text(options.commit || settings.commit);
+    commit.addClass(options.commitClass || settings.commitClass);
+
+    var cancel = modal.find('.cancel');
+    cancel.text(options.cancel || settings.cancel);
+    cancel.addClass(options.cancelClass || settings.cancelClass);
+
+    if (options.remote) {
+      commit.attr('data-dismiss', 'modal');
+    }
+
+    if (options.verify || options.verifyRegexp) {
+      commit.prop('disabled', true);
+
+      var isMatch;
+      if (options.verifyRegexp) {
+        var caseInsensitive = options.verifyRegexpCaseInsensitive;
+        var regexp = options.verifyRegexp;
+        var re = new RegExp(regexp, caseInsensitive ? 'i' : '');
+
+        isMatch = function (input) { return input.match(re) };
+      } else {
+        isMatch = function (input) { return options.verify == input };
+      }
+
+      var verification = $('<input/>', {"type": 'text', "class": settings.verifyClass}).on('keyup', function () {
+        commit.prop('disabled', !isMatch($(this).val()));
+      });
+
+      modal.on('shown.bs.modal', function () {
+        verification.focus();
+      });
+
+      modal.on('hidden.bs.modal', function () {
+        verification.val('').trigger('keyup');
+      });
+
+      if (options.verifyLabel)
+        body.append($('<p>', {text: options.verifyLabel}))
+
+      body.append(verification);
+    }
+
+    var focus_element;
+    if (options.focus) {
+      focus_element = options.focus;
+    } else if (options.method == 'delete') {
+      focus_element = 'cancel'
+    } else {
+      focus_element = settings.focus;
+    }
+    focus_element = modal.find('.' + focus_element);
+
+    modal.on('shown.bs.modal', function () {
+      focus_element.focus();
+    });
+
+    $('body').append(modal);
+
+    modal.spawn = function() {
+      return modal.modal({
+        backdrop: options.backdrop,
+        keyboard: options.keyboard,
+        show:     options.show
+      });
+    };
+
+    return modal;
+  };
+
+
+  /**
+   * Returns a modal already built for the given element or builds a new one,
+   * caching it into the element's `confirm-modal` data attribute.
+   */
+  var getModal = function (element) {
+    var modal = element.data('confirm-modal') || buildElementModal(element);
+
+    if (modal && !element.data('confirm-modal'))
+      element.data('confirm-modal', modal);
+
+    return modal;
+  };
+
+  $.fn.confirmModal = function () {
+    getModal($(this)).spawn();
+
+    return this;
+  };
+
+  if ($.rails) {
+    /**
+     * Attaches to the Rails' UJS adapter 'confirm' event on links having a
+     * `data-confirm` attribute. Temporarily overrides the `$.rails.confirm`
+     * function with an anonymous one that returns the 'confirmed' status of
+     * the modal.
+     *
+     * A modal is considered 'confirmed' when an user has successfully clicked
+     * the 'confirm' button in it.
+     */
+    $(document).delegate(settings.elements.join(', '), 'confirm', function() {
+      var element = $(this), modal = getModal(element);
+      var confirmed = modal.data('confirmed');
+
+      if (!confirmed && !modal.is(':visible')) {
+        modal.spawn();
+
+        var confirm = $.rails.confirm;
+        $.rails.confirm = function () { return modal.data('confirmed'); }
+        modal.on('hide', function () { $.rails.confirm = confirm; });
+      }
+
+      return confirmed;
+    });
+  }
+
+})(jQuery);

metadata

@@ -0,0 +1,69 @@
+--- !ruby/object:Gem::Specification
+name: data-confirm-modal
+version: !ruby/object:Gem::Version
+  version: 1.1.1
+platform: ruby
+authors:
+- Marcello Barnaba
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2016-04-27 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: railties
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.0'
+description: This gem overrides Rails' UJS behaviour to open up a Bootstrap Modal
+  instead of the browser's built in confirm() dialog
+email:
+- vjt@openssl.it
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".gitignore"
+- Gemfile
+- LICENSE
+- README.md
+- Rakefile
+- data-confirm-modal.gemspec
+- lib/data-confirm-modal.rb
+- lib/data-confirm-modal/engine.rb
+- lib/data-confirm-modal/version.rb
+- vendor/assets/javascripts/data-confirm-modal.js
+homepage: http://github.com/ifad/data-confirm-modal
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 1.3.6
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.5.1
+signing_key: 
+specification_version: 4
+summary: Use bootstrap modals with Rails' UJS data-confirm
+test_files: []