data-confirm-bourbon 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: d59c8dad066f27cff956baac9e38ca65d5646c7c
+  data.tar.gz: 2254f6a48f701b442447e6e8e2dde4dcc6b8331f
+SHA512:
+  metadata.gz: 1e441c67e599efaf9fb1b05aae85ad95a5f803ccfb2016605c6cb88265e0e803435224b279abe4cb6ab6ff4acf0f46c4944a00919d187492a3de0eba59e382b5
+  data.tar.gz: fe6ad296af2ec32627933b70c42de9de4c7515cdda71597ca7d2186afdeeda0e490c8e9ec8d721ad16f4e3c51c526d7fcfd405b665a173eecad4dd1e8af762a1

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) 2015 Trevor Brown <admin@stratus3d.com>
+
+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,146 @@
+# Data-Confirm Modal
+
+Uses [Bourbon Refill's modals](http://refills.bourbon.io/components/#modal)
+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 Bourbon Refill 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-bourbon', github: 'Stratus3D/data-confirm-bourbon'
+
+Then execute:
+
+    $ bundle
+
+Then generate the modal Sass:
+
+    rails generate refills:import modal
+
+Then include it in `application.scss`:
+
+    @import "refills/_modal";
+
+Your `application.scss` file should look something like this we you are finished:
+
+    @import "base/base";
+    @import 'base/grid-settings';
+    @import "neat";
+    @import "refills/_modal";
+
+If you have trouble getting all the imports correct refer to [this refills issue](https://github.com/thoughtbot/refills/issues/113).
+
+And then require the JavaScript from your `application.js`:
+
+    //= require data-confirm-bourbon
+
+## 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 `dataConfirmBourbonModal.setDefaults`, for example:
+
+    dataConfirmBourbonModal.setDefaults({
+      title: 'Confirm your action',
+      commit: 'Continue',
+      cancel: 'Cancel'
+    });
+
+To restore default settings use `dataConfirmBourbonModal.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 `dataConfirmBourbonModal.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.
+
+    dataConfirmBourbonModal.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') }
+    });
+
+### Modal Options
+
+The options [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">
+
+## Issues
+
+* Can't be used without rails.
+* Can't be called directly from JavaScript.
+
+## Authors
+
+* Trevor Brown ([@Stratus3D](http://github.com/Stratus3D))
+* 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 ... ;-). [Initially built for bootstrap](https://github.com/ifad/data-confirm-modal) and then later converted to work with Bourbon Refills.
+
+## 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-bourbon.gemspec

@@ -0,0 +1,21 @@
+# -*- encoding: utf-8 -*-
+require File.expand_path('../lib/data-confirm-bourbon/version', __FILE__)
+
+Gem::Specification.new do |s|
+  s.name        = "data-confirm-bourbon"
+  s.version     = DataConfirmBourbon::VERSION
+  s.platform    = Gem::Platform::RUBY
+  s.authors     = ["Trevor Brown"]
+  s.email       = ["admin@stratus3d.com"]
+  s.homepage    = "http://github.com/Stratus3D/data-confirm-bourbon"
+  s.license     = "MIT"
+  s.summary     = "Use Bourbon Refill modals with Rails' UJS data-confirm"
+  s.description = "This gem overrides Rails' UJS behaviour to open up a Bourbon Refill modal component instead of the browser's built in confirm() dialog"
+
+  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-bourbon.rb

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

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

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

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

@@ -0,0 +1,3 @@
+module DataConfirmBourbon
+  VERSION = '0.1.0'
+end

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

@@ -0,0 +1,323 @@
+/*
+ * Implements a user-facing modal confirmation when link has a
+ * "data-confirm" attribute using Bourbon Refill's modal component. MIT license.
+ *
+ */
+(function ($) {
+
+  /**
+   * Builds the markup for a [Bourbon Refill modal](http://refills.bourbon.io/components/#modal)
+   * 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 `dataConfirmBourbonModal.setDefaults`, for example:
+   *
+   *    dataConfirmBourbonModal.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: 'cancel',
+    zIndex: 1050,
+    modalClass: false,
+    show: true
+  };
+
+  var settings = $.extend({}, defaults);
+
+  var buildModal = function (options) {
+    var id = 'confirm-modal-' + String(Math.random()).slice(2, -1);
+    //var fade = settings.fade ? 'fade' : '';
+    var modalClass = settings.modalClass || '';
+    var element = options.element;
+
+    var modal = $('<div class="modal">' +
+                  '<input class="modal-state" id="' + id + '" type="checkbox" />' +
+                  '<div class="modal-window">' +
+                  '<div class="modal-inner ' + modalClass + '">' +
+                  '<label class="modal-close" for="' + id + '"></label>' +
+                  '<h1 class="modal-title">Modal Title</h1>' +
+                  '<div class="modal-content"></div>' +
+                  '<div class="modal-footer">' +
+                  '<button class="cancel" data-dismiss="modal"></button>' +
+                  '<button class="commit"></button>' +
+                  '</div>'+
+                  '</div>' +
+                  '</div>' +
+                  '</div>'
+                  );
+
+    $('body').append(modal);
+    element.data('confirm-modal-id', id);
+
+    var modalState = modal.find('.modal-state');
+
+    modal.find('.modal-title').text(options.title || settings.title);
+
+    var body = modal.find('.modal-content');
+
+    $.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()));
+      });
+
+      modalState.on('change', function () {
+          if (this.checked) {
+              verification.focus();
+          } else {
+              verification.val('').trigger('keyup');
+          }
+      });
+
+      if (options.verifyLabel) {
+        body.append($('<p>', {text: options.verifyLabel}));
+      }
+
+      body.append(verification);
+    }
+
+    var focusElement;
+    if (options.focus) {
+      focusElement = options.focus;
+    } else if (options.method === 'delete') {
+      focusElement = 'cancel';
+    } else {
+      focusElement = settings.focus;
+    }
+    focusElement = modal.find('.' + focusElement);
+
+    modal.data('confirmed', false);
+
+    var stateChangeHandler = function () {
+        if (modalState.is(':checked')) {
+            $("body").addClass("modal-open");
+            modal.trigger('shown');
+            focusElement.focus();
+        } else {
+            $("body").removeClass("modal-open");
+            modal.trigger('hidden');
+        }
+    };
+
+    modalState.on('click', function () {
+        stateChangeHandler();
+    });
+
+    modalState.on('change', function () {
+        stateChangeHandler();
+    });
+
+    modal.find('.commit').on('click', function () {
+        if (options.onConfirm && options.onConfirm.call) {
+            options.onConfirm.call();
+        }
+    });
+
+    modal.find('.cancel').on('click', function () {
+        if (options.onCancel && options.onCancel.call) {
+            options.onCancel.call();
+        }
+
+        modal.hide();
+    });
+
+    return modal;
+  };
+
+  window.dataConfirmBourbonModal = {
+    setDefaults: function (newSettings) {
+      settings = $.extend(settings, newSettings);
+    },
+
+    restoreDefaults: function () {
+      settings = $.extend({}, defaults);
+    },
+
+    confirm: function (options) {
+      // Build an ephemeral modal
+      //
+      var modal = buildModal(options);
+
+      modal.show();
+
+      modal.find('.commit').on('click', function () {
+        if (options.onConfirm && options.onConfirm.call) {
+          options.onConfirm.call();
+        }
+
+        modal.hide();
+      });
+
+      modal.find('.cancel').on('click', function () {
+        if (options.onCancel && options.onCancel.call) {
+          options.onCancel.call();
+        }
+
+        modal.hide();
+      });
+    }
+  };
+
+  window.dataConfirmBourbonModal.restoreDefaults();
+
+  var buildElementModal = function (element) {
+    var options = {
+      element:      element,
+      title:        element.data('confirm'),
+      text:         element.data('text'),
+      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.hide();
+    });
+
+    return modal;
+  };
+
+  var decorateModal = function (modal) {
+    var modalState = modal.find('.modal-state');
+
+    modal.isVisible = function() {
+        return modalState.is(':checked');
+    };
+
+    modal.hide = function() {
+        if (modalState.prop('checked')) {
+            modalState.trigger('click');
+        }
+    };
+
+    modal.show = function() {
+        if (!modalState.prop('checked')) {
+            modalState.trigger('click');
+        }
+    };
+
+    return modal;
+  };
+
+  var getExistingModal = function (element) {
+    var modalId = element.data('confirm-modal-id');
+    if (modalId) {
+        var modal = $($('#'+modalId).parent()[0]);
+        return modal;
+    }
+
+    return;
+  };
+
+  /**
+   * 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 = getExistingModal(element) || buildElementModal(element);
+
+    // Decorate the modal with the functions we need
+    var decoratedModal = decorateModal(modal);
+
+    return decoratedModal;
+  };
+
+  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),
+          confirmed = modal.data('confirmed');
+
+      if (!confirmed && !modal.isVisible()) {
+        modal.show();
+
+        var confirm = $.rails.confirm;
+        $.rails.confirm = function () { return modal.data('confirmed'); };
+        modal.on('hidden', function () { $.rails.confirm = confirm; });
+      }
+
+      return confirmed;
+    });
+  }
+
+})(jQuery);

metadata

@@ -0,0 +1,70 @@
+--- !ruby/object:Gem::Specification
+name: data-confirm-bourbon
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Trevor Brown
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2015-12-05 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 Bourbon Refill modal
+  component instead of the browser's built in confirm() dialog
+email:
+- admin@stratus3d.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".gitignore"
+- Gemfile
+- LICENSE
+- README.md
+- Rakefile
+- data-confirm-bourbon.gemspec
+- lib/data-confirm-bourbon.rb
+- lib/data-confirm-bourbon/engine.rb
+- lib/data-confirm-bourbon/version.rb
+- vendor/assets/javascripts/data-confirm-bourbon.js
+homepage: http://github.com/Stratus3D/data-confirm-bourbon
+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.4.5
+signing_key: 
+specification_version: 4
+summary: Use Bourbon Refill modals with Rails' UJS data-confirm
+test_files: []
+has_rdoc: