effective_form_inputs 0.5.0 → 0.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 792d97f3b56394922bae94e8a202d9b92d0ac664
-  data.tar.gz: ec1a60a1d46296341d949c28efa63a1bc56f7c0d
+  metadata.gz: e84a838832b598cc3b8261c04f468d304ae5d6ce
+  data.tar.gz: 9a1ce4d38760e24e0ff95a59db675cc94e98d97b
 SHA512:
-  metadata.gz: c2f35c124ce855d1e71305d1e2a0bfd335e03b661b9d006e3d1904bcc5994e22fe6f0ee2b3ba3a487477e2d7ddee5acce99f47d8e78e725e4f1706ab2c52217b
-  data.tar.gz: 3cec8f1c61b3540f748b8ca422f90965009c72a9373355b164d36ef10c29a4aa2aea2514dc058aaead4804a0934fd09ddf78ba02aabd5136057b44f5c8abc340
+  metadata.gz: 5e357f9a67eb8ff7d33932117681d9552306db028835ec39fb71641b52ef2fd25431ea27f16582098a9e336c4c60df3b404ccca780c786672200501594b59669
+  data.tar.gz: 08f29d5e3bf603b181b3696519e7e4d67111598b1324be2592a8740bb0d3a97ebb43db5c9b803999a7dbc5c52fddc40a8abedd458b6b8c53df2b446d3b05514b

data/README.md

@@ -8,8 +8,6 @@ Each included form input is available to both the default Rails Form Helper and
 
 Rails 3.2.x and 4.x
 
-Right now there's just one form input.  This will grow.
-
 ## Getting Started
 
 Add to your Gemfile:
@@ -93,7 +91,7 @@ As a SimpleForm input without the input group (calendar glyphicon)
 
 ### Options
 
-The default options used to initialize this form input are as follows:
+The default `:input_js => options` used to initialize this form input are as follows:
 
 ```ruby
 :input_js => {:format => 'YYYY-MM-DD h:mm A', :sideBySide => true}
@@ -152,7 +150,7 @@ As a SimpleForm input without the input group (calendar glyphicon)
 
 ### Options
 
-The default options used to initialize this form input are as follows:
+The default `:input_js => options` used to initialize this form input are as follows:
 
 ```ruby
 :input_js => {:format => 'YYYY-MM-DD'}
@@ -191,7 +189,7 @@ As a SimpleForm input:
 
 ### Options
 
-There are no options for this form input
+There are no default options for this form input
 
 
 ## Effective Select
@@ -243,7 +241,7 @@ The standard mode is a replacement for the default single select box.
 
 Passing `:multiple => true` will allow multiple selections to be made.
 
-Passing `:multiple => true, :tags => true` will allow multiple selections to be made, and new value options to be created.  This will allow you to select one or more tags and create tags in the same form control.
+Passing `:multiple => true, :tags => true` will allow multiple selections to be made, and new value options to be created.  This will allow you to both select existing tags and create new tags in the same form control.
 
 
 ### Options
@@ -251,12 +249,14 @@ Passing `:multiple => true, :tags => true` will allow multiple selections to be
 The default `:input_js => options` used to initialize this form input are as follows:
 
 ```ruby
-:theme => 'bootstrap'
-:minimumResultsForSearch => 6
-:tokenSeparators => [',', ' ']
-:width => 'style'
-:placeholder => 'Please choose'
-:allowClear => !(options[:multiple])  # Only display the Clear 'x' on a single selection box
+{
+  :theme => 'bootstrap',
+  :minimumResultsForSearch => 6,
+  :tokenSeparators => [',', ' '],
+  :width => 'style',
+  :placeholder => 'Please choose',
+  :allowClear => !(options[:multiple])  # Only display the Clear 'x' on a single selection box
+}
 ```
 
 ### Interesting Available Options
@@ -283,6 +283,79 @@ https://select2.github.io/options.html
 There is currently no support for using AJAX to load remote data.  This feature is supported by the underlying select2 library and will be implemented here at a future point.
 
 
+## Effective Tel(ephone)
+
+This custom form input uses a jQuery maskedInput plugin from the following awesome project:
+
+http://digitalbush.com/projects/masked-input-plugin/
+
+https://github.com/digitalBush/jquery.maskedinput
+
+
+### Installation
+
+If you've already installed the 'All Form Inputs' assets (see above), there are no additional installation steps.
+
+To install this form input individually, add the following to your application.js:
+
+```ruby
+//= require effective_tel/input
+```
+
+and add the following to your application.css:
+
+```ruby
+*= require effective_tel/input
+```
+
+### Usage
+
+As a Rails Form Helper input:
+
+```ruby
+= form_for @user do |f|
+  = f.effective_tel :phone
+```
+
+As a SimpleForm input:
+
+```ruby
+= simple_form_for @user do |f|
+  = f.input :phone, :as => :effective_tel
+```
+
+As a SimpleForm input without the input group (phone glyphicon)
+
+```ruby
+= simple_form_for @user do |f|
+  = f.input :phone, :as => :effective_tel, :input_group => false
+```
+
+### Options
+
+By default, this form input uses the `glyphicon-earphone` glyphicon and accepts a telephone number with optional 5-digit extension.
+
+It will set up a mask as follows:
+
+```ruby
+:input_js => {:mask => '(999) 999-9999? x99999'}
+```
+
+Calling the form input with `:cellphone => true` will use the `glyphicon-phone` glyphicon and accept only a telephone number.
+
+It will set up a mask as follows:
+
+```ruby
+:input_js => {:mask => '(999) 999-9999'}
+```
+
+The only available javascript options are `mask` and `placeholder`:
+
+```ruby
+:input_js => {:mask => '...', :placeholder => '_'}
+```
+
+
 ## Passing Options to JavaScript
 
 All `:input_js => options` passed to any effective_form_input will be used to initialize the Javascript library
@@ -309,8 +382,6 @@ $('input.effective_date_time_picker').datetimepicker
   showTodayButton: true
 ```
 
-Any option not recognized as a Rails Form Helper or SimpleForm option will be passed in this way to Javascript.
-
 ## License
 
 MIT License.  Copyright [Code and Effect Inc.](http://www.codeandeffect.com/)
@@ -320,9 +391,9 @@ Code and Effect is the product arm of [AgileStyle](http://www.agilestyle.com/),
 
 ## Credits
 
-The authors of this gem are not associated with any of the awesome projects used in this gem.
+The authors of this gem are not associated with any of the awesome projects used by this gem.
 
-We are just extending these existing community projects for ease of use with Rails Form Helper and SimpleForm
+We are just extending these existing community projects for ease of use with Rails Form Helper and SimpleForm.
 
 
 ## Contributing
@@ -333,4 +404,3 @@ We are just extending these existing community projects for ease of use with Rai
 4. Push to the branch (`git push origin my-new-feature`)
 5. Bonus points for test coverage
 6. Create new Pull Request
-

data/app/assets/javascripts/effective_form_inputs.js

@@ -1,3 +1,4 @@
 //= require ./effective_date_time_picker/input
 //= require ./effective_date_picker/input
 //= require ./effective_select/input
+//= require ./effective_tel/input

data/app/assets/javascripts/effective_tel/initialize.js.coffee

@@ -0,0 +1,15 @@
+# http://digitalbush.com/projects/masked-input-plugin/
+
+initialize = ->
+  $('input.effective_tel:not(.initialized)').each (i, element) ->
+    element = $(element)
+    options = element.data('input-js-options') || {}
+
+    mask = options['mask']
+    delete options['mask']
+
+    element.addClass('initialized').mask(mask, options)
+
+$ -> initialize()
+$(document).on 'page:change', -> initialize()
+$(document).on 'cocoon:after-insert', -> initialize()

data/app/assets/javascripts/effective_tel/input.js

@@ -0,0 +1,2 @@
+//= require ./jquery.maskedInput
+//= require ./initialize

data/app/assets/javascripts/effective_tel/jquery.maskedInput.js

@@ -0,0 +1,182 @@
+/*
+    jQuery Masked Input Plugin
+    Copyright (c) 2007 - 2014 Josh Bush (digitalbush.com)
+    Licensed under the MIT license (http://digitalbush.com/projects/masked-input-plugin/#license)
+    Version: 1.4.0
+*/
+!function(factory) {
+    "function" == typeof define && define.amd ? define([ "jquery" ], factory) : factory("object" == typeof exports ? require("jquery") : jQuery);
+}(function($) {
+    var caretTimeoutId, ua = navigator.userAgent, iPhone = /iphone/i.test(ua), chrome = /chrome/i.test(ua), android = /android/i.test(ua);
+    $.mask = {
+        definitions: {
+            "9": "[0-9]",
+            a: "[A-Za-z]",
+            "*": "[A-Za-z0-9]"
+        },
+        autoclear: !0,
+        dataName: "rawMaskFn",
+        placeholder: "_"
+    }, $.fn.extend({
+        caret: function(begin, end) {
+            var range;
+            if (0 !== this.length && !this.is(":hidden")) return "number" == typeof begin ? (end = "number" == typeof end ? end : begin,
+            this.each(function() {
+                this.setSelectionRange ? this.setSelectionRange(begin, end) : this.createTextRange && (range = this.createTextRange(),
+                range.collapse(!0), range.moveEnd("character", end), range.moveStart("character", begin),
+                range.select());
+            })) : (this[0].setSelectionRange ? (begin = this[0].selectionStart, end = this[0].selectionEnd) : document.selection && document.selection.createRange && (range = document.selection.createRange(),
+            begin = 0 - range.duplicate().moveStart("character", -1e5), end = begin + range.text.length),
+            {
+                begin: begin,
+                end: end
+            });
+        },
+        unmask: function() {
+            return this.trigger("unmask");
+        },
+        mask: function(mask, settings) {
+            var input, defs, tests, partialPosition, firstNonMaskPos, lastRequiredNonMaskPos, len, oldVal;
+            if (!mask && this.length > 0) {
+                input = $(this[0]);
+                var fn = input.data($.mask.dataName);
+                return fn ? fn() : void 0;
+            }
+            return settings = $.extend({
+                autoclear: $.mask.autoclear,
+                placeholder: $.mask.placeholder,
+                completed: null
+            }, settings), defs = $.mask.definitions, tests = [], partialPosition = len = mask.length,
+            firstNonMaskPos = null, $.each(mask.split(""), function(i, c) {
+                "?" == c ? (len--, partialPosition = i) : defs[c] ? (tests.push(new RegExp(defs[c])),
+                null === firstNonMaskPos && (firstNonMaskPos = tests.length - 1), partialPosition > i && (lastRequiredNonMaskPos = tests.length - 1)) : tests.push(null);
+            }), this.trigger("unmask").each(function() {
+                function tryFireCompleted() {
+                    if (settings.completed) {
+                        for (var i = firstNonMaskPos; lastRequiredNonMaskPos >= i; i++) if (tests[i] && buffer[i] === getPlaceholder(i)) return;
+                        settings.completed.call(input);
+                    }
+                }
+                function getPlaceholder(i) {
+                    return settings.placeholder.charAt(i < settings.placeholder.length ? i : 0);
+                }
+                function seekNext(pos) {
+                    for (;++pos < len && !tests[pos]; ) ;
+                    return pos;
+                }
+                function seekPrev(pos) {
+                    for (;--pos >= 0 && !tests[pos]; ) ;
+                    return pos;
+                }
+                function shiftL(begin, end) {
+                    var i, j;
+                    if (!(0 > begin)) {
+                        for (i = begin, j = seekNext(end); len > i; i++) if (tests[i]) {
+                            if (!(len > j && tests[i].test(buffer[j]))) break;
+                            buffer[i] = buffer[j], buffer[j] = getPlaceholder(j), j = seekNext(j);
+                        }
+                        writeBuffer(), input.caret(Math.max(firstNonMaskPos, begin));
+                    }
+                }
+                function shiftR(pos) {
+                    var i, c, j, t;
+                    for (i = pos, c = getPlaceholder(pos); len > i; i++) if (tests[i]) {
+                        if (j = seekNext(i), t = buffer[i], buffer[i] = c, !(len > j && tests[j].test(t))) break;
+                        c = t;
+                    }
+                }
+                function androidInputEvent() {
+                    var curVal = input.val(), pos = input.caret();
+                    if (curVal.length < oldVal.length) {
+                        for (checkVal(!0); pos.begin > 0 && !tests[pos.begin - 1]; ) pos.begin--;
+                        if (0 === pos.begin) for (;pos.begin < firstNonMaskPos && !tests[pos.begin]; ) pos.begin++;
+                        input.caret(pos.begin, pos.begin);
+                    } else {
+                        for (checkVal(!0); pos.begin < len && !tests[pos.begin]; ) pos.begin++;
+                        input.caret(pos.begin, pos.begin);
+                    }
+                    tryFireCompleted();
+                }
+                function blurEvent() {
+                    checkVal(), input.val() != focusText && input.change();
+                }
+                function keydownEvent(e) {
+                    if (!input.prop("readonly")) {
+                        var pos, begin, end, k = e.which || e.keyCode;
+                        oldVal = input.val(), 8 === k || 46 === k || iPhone && 127 === k ? (pos = input.caret(),
+                        begin = pos.begin, end = pos.end, end - begin === 0 && (begin = 46 !== k ? seekPrev(begin) : end = seekNext(begin - 1),
+                        end = 46 === k ? seekNext(end) : end), clearBuffer(begin, end), shiftL(begin, end - 1),
+                        e.preventDefault()) : 13 === k ? blurEvent.call(this, e) : 27 === k && (input.val(focusText),
+                        input.caret(0, checkVal()), e.preventDefault());
+                    }
+                }
+                function keypressEvent(e) {
+                    if (!input.prop("readonly")) {
+                        var p, c, next, k = e.which || e.keyCode, pos = input.caret();
+                        if (!(e.ctrlKey || e.altKey || e.metaKey || 32 > k) && k && 13 !== k) {
+                            if (pos.end - pos.begin !== 0 && (clearBuffer(pos.begin, pos.end), shiftL(pos.begin, pos.end - 1)),
+                            p = seekNext(pos.begin - 1), len > p && (c = String.fromCharCode(k), tests[p].test(c))) {
+                                if (shiftR(p), buffer[p] = c, writeBuffer(), next = seekNext(p), android) {
+                                    var proxy = function() {
+                                        $.proxy($.fn.caret, input, next)();
+                                    };
+                                    setTimeout(proxy, 0);
+                                } else input.caret(next);
+                                pos.begin <= lastRequiredNonMaskPos && tryFireCompleted();
+                            }
+                            e.preventDefault();
+                        }
+                    }
+                }
+                function clearBuffer(start, end) {
+                    var i;
+                    for (i = start; end > i && len > i; i++) tests[i] && (buffer[i] = getPlaceholder(i));
+                }
+                function writeBuffer() {
+                    input.val(buffer.join(""));
+                }
+                function checkVal(allow) {
+                    var i, c, pos, test = input.val(), lastMatch = -1;
+                    for (i = 0, pos = 0; len > i; i++) if (tests[i]) {
+                        for (buffer[i] = getPlaceholder(i); pos++ < test.length; ) if (c = test.charAt(pos - 1),
+                        tests[i].test(c)) {
+                            buffer[i] = c, lastMatch = i;
+                            break;
+                        }
+                        if (pos > test.length) {
+                            clearBuffer(i + 1, len);
+                            break;
+                        }
+                    } else buffer[i] === test.charAt(pos) && pos++, partialPosition > i && (lastMatch = i);
+                    return allow ? writeBuffer() : partialPosition > lastMatch + 1 ? settings.autoclear || buffer.join("") === defaultBuffer ? (input.val() && input.val(""),
+                    clearBuffer(0, len)) : writeBuffer() : (writeBuffer(), input.val(input.val().substring(0, lastMatch + 1))),
+                    partialPosition ? i : firstNonMaskPos;
+                }
+                var input = $(this), buffer = $.map(mask.split(""), function(c, i) {
+                    return "?" != c ? defs[c] ? getPlaceholder(i) : c : void 0;
+                }), defaultBuffer = buffer.join(""), focusText = input.val();
+                input.data($.mask.dataName, function() {
+                    return $.map(buffer, function(c, i) {
+                        return tests[i] && c != getPlaceholder(i) ? c : null;
+                    }).join("");
+                }), input.one("unmask", function() {
+                    input.off(".mask").removeData($.mask.dataName);
+                }).on("focus.mask", function() {
+                    if (!input.prop("readonly")) {
+                        clearTimeout(caretTimeoutId);
+                        var pos;
+                        focusText = input.val(), pos = checkVal(), caretTimeoutId = setTimeout(function() {
+                            writeBuffer(), pos == mask.replace("?", "").length ? input.caret(0, pos) : input.caret(pos);
+                        }, 10);
+                    }
+                }).on("blur.mask", blurEvent).on("keydown.mask", keydownEvent).on("keypress.mask", keypressEvent).on("input.mask paste.mask", function() {
+                    input.prop("readonly") || setTimeout(function() {
+                        var pos = checkVal(!0);
+                        input.caret(pos), tryFireCompleted();
+                    }, 0);
+                }), chrome && android && input.off("input.mask").on("input.mask", androidInputEvent),
+                checkVal();
+            });
+        }
+    });
+});

data/app/models/effective/form_builder_inputs.rb

@@ -14,9 +14,11 @@ module Effective
 
     def effective_select(method, options_tag = nil, options = {}, html_options = {})
       options[:collection] = options_tag
-      options[:label_method] = :to_s if options[:label_method].nil?
-      options[:value_method] = :to_s if options[:value_method].nil?
       Inputs::EffectiveSelect::Input.new(@object, @object_name, @template, method, options, html_options).to_html
     end
+
+    def effective_tel(method, options_tag = nil, options = {}, html_options = {})
+      Inputs::EffectiveTel::Input.new(@object, @object_name, @template, method, options, html_options).to_html
+    end
   end
 end

data/app/models/effective/form_input.rb

@@ -10,6 +10,8 @@ module Effective
       # Initialize 3 options Hashes:  @opts, @html_opts, and @js_opts
       @js_opts = opts.delete(:input_js).presence || {}
       @html_opts = html_opts.presence || opts.delete(:input_html) || {}
+      @html_opts.delete(:placeholder) if @html_opts[:placeholder] == nil # SimpleForm oddity
+
       @opts = opts.presence || {}
 
       # Copy the following keys from options to html_options
@@ -60,6 +62,7 @@ module Effective
       html_options().tap do |html_options|
         html_options['data-input-js-options'] = (JSON.generate(js_options) rescue {})
         html_options[:class] = html_options[:class].join(' ')
+        html_options[:placeholder] = (html_options[:placeholder].presence || options[:placeholder])
       end
     end
 

data/app/models/inputs/effective_date_picker/input.rb

@@ -16,14 +16,19 @@ module Inputs
           return text_field_tag(field_name, value, tag_options)
         end
 
-        content_tag(:div, :class => 'input-group') do
-          content_tag(:span, :class => 'input-group-addon') do
-            content_tag(:i, '', :class => 'glyphicon glyphicon-calendar').html_safe
+        content_tag(:div, class: 'input-group') do
+          content_tag(:span, class: 'input-group-addon') do
+            content_tag(:i, '', class: 'glyphicon glyphicon-calendar').html_safe
           end +
           text_field_tag(field_name, value, tag_options)
         end
       end
 
+      def value
+        val = super
+        val.kind_of?(Time) ? val.to_date : val
+      end
+
       def html_options
         super.tap do |html_options|
           if js_options[:format] == default_input_js[:format] # Unless someone changed from the default

data/app/models/inputs/effective_date_time_picker/input.rb

@@ -16,9 +16,9 @@ module Inputs
           return text_field_tag(field_name, value, tag_options)
         end
 
-        content_tag(:div, :class => 'input-group') do
-          content_tag(:span, :class => 'input-group-addon') do
-            content_tag(:i, '', :class => 'glyphicon glyphicon-calendar').html_safe
+        content_tag(:div, class: 'input-group') do
+          content_tag(:span, class: 'input-group-addon') do
+            content_tag(:i, '', class: 'glyphicon glyphicon-calendar').html_safe
           end +
           text_field_tag(field_name, value, tag_options)
         end

data/app/models/inputs/effective_tel/input.rb

@@ -0,0 +1,45 @@
+module Inputs
+  module EffectiveTel
+    class Input < Effective::FormInput
+      delegate :content_tag, :text_field_tag, :to => :@template
+
+      DEFAULT_TEL_MASK = '(999) 999-9999? x99999'
+      DEFAULT_CELL_MASK = '(999) 999-9999'
+
+      def default_options
+        {cellphone: false}
+      end
+
+      def default_input_html
+        {class: 'effective_tel tel'}
+      end
+
+      def default_input_js
+        {mask: DEFAULT_TEL_MASK, placeholder: '_'}
+      end
+
+      def to_html
+        if options[:input_group] == false
+          return text_field_tag(field_name, value, tag_options)
+        end
+
+        content_tag(:div, class: 'input-group') do
+          content_tag(:span, class: 'input-group-addon') do
+            content_tag(:i, '', class: "glyphicon glyphicon-#{options[:cellphone] ? 'phone' : 'earphone'}").html_safe
+          end +
+          text_field_tag(field_name, value, tag_options)
+        end
+      end
+
+      def js_options
+        super.tap do |js_options|
+          if options[:cellphone] == true && js_options[:mask] == DEFAULT_TEL_MASK
+            js_options[:mask] = DEFAULT_CELL_MASK
+          end
+        end
+      end
+
+    end
+  end
+end
+

data/app/models/inputs/effective_tel_input.rb

@@ -0,0 +1,12 @@
+# = simple_form_for @thing do |f|
+#   = f.input :phone, :as => :effective_tel
+
+if defined?(SimpleForm)
+
+  class EffectiveTelInput < SimpleForm::Inputs::StringInput
+    def input(wrapper_options = nil)
+      Inputs::EffectiveTel::Input.new(object, object_name, template, attribute_name, input_options, (merge_wrapper_options(input_html_options, wrapper_options) || {})).to_html
+    end
+  end
+
+end

data/lib/effective_form_inputs/version.rb

@@ -1,3 +1,3 @@
 module EffectiveFormInputs
-  VERSION = '0.5.0'.freeze
+  VERSION = '0.6.0'.freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: effective_form_inputs
 version: !ruby/object:Gem::Version
-  version: 0.5.0
+  version: 0.6.0
 platform: ruby
 authors:
 - Code and Effect
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-06-04 00:00:00.000000000 Z
+date: 2015-06-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -58,6 +58,9 @@ files:
 - app/assets/javascripts/effective_select/initialize.js.coffee
 - app/assets/javascripts/effective_select/input.js
 - app/assets/javascripts/effective_select/select2.js
+- app/assets/javascripts/effective_tel/initialize.js.coffee
+- app/assets/javascripts/effective_tel/input.js
+- app/assets/javascripts/effective_tel/jquery.maskedInput.js
 - app/assets/stylesheets/effective_date_picker/input.scss
 - app/assets/stylesheets/effective_date_time_picker/bootstrap-datetimepicker.scss
 - app/assets/stylesheets/effective_date_time_picker/input.scss
@@ -76,6 +79,8 @@ files:
 - app/models/inputs/effective_select_input.rb
 - app/models/inputs/effective_static_control/input.rb
 - app/models/inputs/effective_static_control_input.rb
+- app/models/inputs/effective_tel/input.rb
+- app/models/inputs/effective_tel_input.rb
 - app/views/effective/style_guide/_form_default.html.haml
 - lib/effective_form_inputs.rb
 - lib/effective_form_inputs/engine.rb