formtastic_masked_input 0.1.0

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright (c) 2010 Gabriel Sobrinho
+
+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.textile

@@ -0,0 +1,60 @@
+h1. formtastic_masked_input
+
+Sometimes you want to mask your fields like phones, zipcodes or something like that.
+
+This plugin will do it for you if you are using formtastic.
+
+Note: the javascript file depends on Prototype 1.6.1, just update your prototype.js. Rails 2 uses Prototype version 1.6.0.3
+
+h2. Usage
+
+<pre>$ ruby script/plugin install git://github.com/sobrinho/formtastic_masked_input.git
+$ ruby script/generate formtastic_masked_input</pre>
+
+Include prototype.js and masked_input.js into layout:
+
+<pre><%= javascript_include_tag 'prototype', 'masked_input' %></pre>
+
+And update your form field:
+
+<pre><% semantic_form_for @person do |f| %>
+  <% f.inputs do %>
+    <%= f.input :name %>
+    <%= f.input :phone, :as => :masked, :mask => :phone %>
+  <% end %>
+
+  <%= f.buttons %>
+<% end %></pre>
+
+h2. Masks
+
+The available masks are made for Brazil:
+
+* phone: (99) 9999-9999
+* cpf: 999.999.999-99
+* cnpj: 99.999.999/9999-99
+* date: 99/99/9999
+* cep: 99999-999
+* time: 99:99
+
+If you want to add a custom mask, you can edit masked_input.js around line 301 (preferred) or add directly into your layout:
+
+<pre><%= javascript_include_tag 'prototype', 'masked_input' %>
+<script type="text/javascript">
+//<![CDATA[
+    Object.extend(MaskedInput.masks, {
+        'version': '9.9.9'
+    });
+//]]>
+</script></pre>
+
+h2. Credits
+
+Special thanks to Justin French for formtastic and Bjarte K. Vebjørnsen for MaskedInput port for Prototype.
+
+h2. TODO
+
+* Make tests for plugin
+* Make tests for MaskedInput
+
+Copyright (c) 2010 Gabriel Sobrinho, released under the MIT license

data/Rakefile

@@ -0,0 +1,27 @@
+require 'rake'
+require 'rake/testtask'
+require 'rake/rdoctask'
+
+begin
+  require 'jeweler'
+  Jeweler::Tasks.new do |gemspec|
+    gemspec.name = "formtastic_masked_input"
+    gemspec.summary = "MaskedInput for formtastic"
+    gemspec.email = "gabriel.sobrinho@gmail.com"
+    gemspec.homepage = "http://github.com/sobrinho/formtastic_masked_input"
+    gemspec.authors = ["Gabriel Sobrinho"]
+  end
+
+  Jeweler::GemcutterTasks.new
+rescue LoadError
+  puts "Jeweler not available. Install it with: gem install jeweler"
+end
+
+desc 'Generate documentation for the formtastic_masked_input plugin.'
+Rake::RDocTask.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'FormtasticMaskedInput'
+  rdoc.options << '--line-numbers' << '--inline-source'
+  rdoc.rdoc_files.include('README')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end

data/VERSION

@@ -0,0 +1 @@
+0.1.0

data/generators/formtastic_masked_input/USAGE

@@ -0,0 +1,9 @@
+Description:
+    The formtastic_masked_input generator creates a javascript file called
+    masked_input.js to the public path which will be used on formtastic.
+
+Example:
+    ./script/generate formtastic_masked_input
+
+    This will create:
+        public/javascripts/masked_input.js

data/generators/formtastic_masked_input/formtastic_masked_input_generator.rb

@@ -0,0 +1,8 @@
+class FormtasticMaskedInputGenerator < Rails::Generator::Base
+  def manifest
+    record do |m|
+      m.directory "public/javascripts"
+      m.file "masked_input.js", "public/javascripts/masked_input.js"
+    end
+  end
+end

data/generators/formtastic_masked_input/templates/masked_input.js

@@ -0,0 +1,312 @@
+/*
+    Masked Input plugin for prototype ported from jQuery 
+    Bjarte K. Vebjørnsen <bjartekv at gmail dot com>
+        
+    Note that the onchange event isn't fired for masked inputs. It won't fire unless event.simulate.js is available.
+
+    Requires: Prototype >= 1.6.1
+    Optional: event.simulate.js from http://github.com/kangax/protolicious to trigger native change event.
+
+    Tested on windows IE6, IE7, IE8, Opera 9.6, Chrome 3, FireFox 3, Safari 3
+    
+    Masked Input plugin for jQuery
+    Copyright (c) 2007-2009 Josh Bush (digitalbush.com)
+    Licensed under the MIT license (http://digitalbush.com/projects/masked-input-plugin/#license) 
+    Version: 1.2.2 (03/09/2009 22:39:06)
+*/
+
+(function() {
+    var pasteEventName = (Prototype.Browser.IE ? 'paste' : 'input'),
+        iPhone = (window.orientation != undefined);    
+            
+    if(typeof(Prototype) == "undefined")
+        throw "MaskedInput requires Prototype to be loaded.";
+
+    if(Prototype.Version < '1.6.1')
+        throw "MaskedInput requires Prototype 1.6.1 or greater.";
+                        
+    Element.addMethods({
+        caret: function(element, begin, end) {
+            if (element.length == 0) return;
+            if (typeof begin == 'number') {
+                end = (typeof end == 'number') ? end : begin;
+                if (element.setSelectionRange) {
+                    element.focus();
+                    element.setSelectionRange(begin, end);
+                } else if (element.createTextRange) {
+                    var range = element.createTextRange();
+                    range.collapse(true);
+                    range.moveEnd('character', end);
+                    range.moveStart('character', begin);
+                    range.select();
+                }
+            } else {
+                if (element.setSelectionRange) {
+                    begin = element.selectionStart;
+                    end = element.selectionEnd;
+                } else if (document.selection && document.selection.createRange) {
+                    var range = document.selection.createRange();
+                    begin = 0 - range.duplicate().moveStart('character', -100000);
+                    end = begin + range.text.length;
+                }
+                return { begin: begin, end: end };
+            }
+        }
+    });
+
+    MaskedInput = Class.create({
+        initialize: function(selector, mask, settings) {  
+            this.elements = $$(selector);
+            this.mask(mask, settings);	 
+        },
+        unmask: function() { 
+            this.elements.each(function(el) { 
+                el.fire("mask:unmask"); 
+            }); 
+            return this; 
+        },
+        mask: function (mask, settings) {   
+            if (!mask && this.elements.length > 0) {
+                var input = $(this.elements[0]);
+                var tests = input.retrieve("tests");
+                return $A(input.retrieve("buffer")).map(function(c, i) {
+                    return tests[i] ? c : null;
+                }).join('');
+            }
+            settings = Object.extend({
+                placeholder: "_",
+                completed: null
+            }, settings || {});	
+            
+            var defs = MaskedInput.definitions;
+            var tests = [];
+            var partialPosition = mask.length;
+            var firstNonMaskPos = null;
+            var len = mask.length;
+
+            $A(mask.split("")).each(function(c, i) {
+                if (c == '?') {
+                    len--;
+                    partialPosition = i;
+                } else if (defs[c]) {
+                    tests.push(new RegExp(defs[c]));
+                    if(firstNonMaskPos==null)
+                        firstNonMaskPos =  tests.length - 1;
+                } else {
+                    tests.push(null);
+                }
+            });
+            
+            this.elements.each(function(el) {
+            
+                var input = $(el);
+                
+                var buffer = $A(mask.split("")).map( function(c, i) { if (c != '?') return defs[c] ? settings.placeholder : c });
+
+                var ignore = false;  			//Variable for ignoring control keys
+                var focusText = input.getValue();
+                
+                input.store("buffer", buffer).store("tests", tests);
+
+                function seekNext(pos) {
+                    while (++pos < len && !tests[pos]);
+                    return pos;
+                };
+
+                function shiftL(pos) {
+                    while (!tests[pos] && --pos >= 0);
+                    for (var i = pos; i < len; i++) {
+                        if (tests[i]) {
+                            buffer[i] = settings.placeholder;
+                            var j = seekNext(i);
+                            if (j < len && tests[i].test(buffer[j])) {
+                                buffer[i] = buffer[j];
+                            } else
+                                break;
+                        }
+                    }
+                    writeBuffer();
+                    input.caret(Math.max(firstNonMaskPos, pos));
+                };
+
+                function shiftR(pos) {
+                    for (var i = pos, c = settings.placeholder; i < len; i++) {
+                        if (tests[i]) {
+                            var j = seekNext(i);
+                            var t = buffer[i];
+                            buffer[i] = c;
+                            if (j < len && tests[j].test(t))
+                                c = t;
+                            else
+                                break;
+                        }
+                    }
+                };
+
+                function keydownEvent(e) {
+                    var pos = input.caret();
+                    var k = e.keyCode;
+                    ignore = (k < 16 || (k > 16 && k < 32) || (k > 32 && k < 41));
+                    //delete selection before proceeding
+                    if ((pos.begin - pos.end) != 0 && (!ignore || k == 8 || k == 46))
+                        clearBuffer(pos.begin, pos.end);
+
+                    //backspace, delete, and escape get special treatment
+                    if (k == 8 || k == 46 || (iPhone && k == 127)) {//backspace/delete
+                        shiftL(pos.begin + (k == 46 ? 0 : -1));
+                        e.stop();
+                    } else if (k == 27) {//escape
+                        input.setValue(focusText);
+                        input.caret(0, checkVal());
+                        e.stop();
+                    }
+                };
+
+                function keypressEvent(e) {
+                    if (ignore) {
+                        ignore = false;
+                        //Fixes Mac FF bug on backspace
+                        return (e.keyCode == 8) ? false : null;
+                    }
+                    e = e || window.event;
+                    var k = e.charCode || e.keyCode || e.which;
+                    var pos = input.caret();
+                    if (e.ctrlKey || e.altKey || e.metaKey) {//Ignore
+                        return true;
+                    } else if ((k >= 32 && k <= 125) || k > 186) {//typeable characters
+                        var p = seekNext(pos.begin - 1);
+                        if (p < len) {
+                            var c = String.fromCharCode(k);
+                            if (tests[p].test(c)) {
+                                shiftR(p);
+                                buffer[p] = c;
+                                writeBuffer();
+                                var next = seekNext(p);
+                                input.caret(next);
+                                if (settings.completed && next == len)
+                                    settings.completed.call(input);
+                            }
+                        }
+                    }
+                    e.stop();
+                };
+            
+                function blurEvent(e) {
+                    checkVal();
+                    if (input.getValue() != focusText) {
+                        // since the native change event doesn't fire we have to fire it ourselves
+                        // since Event.fire doesn't support native events we're using Event.simulate if available
+                        if (window.Event.simulate) {
+                            input.simulate('change');
+                        }
+                    }
+                };
+            
+                function focusEvent(e) {
+                    focusText = input.getValue();
+                    var pos = checkVal();
+                    writeBuffer();
+                        
+                    setTimeout(function() {
+                        if (pos == mask.length)
+                            input.caret(0, pos);
+                        else
+                            input.caret(pos);
+                    }, 0);
+                };
+            
+                function pasteEvent(e) {
+                    setTimeout(function() { input.caret(checkVal(true)); }, 0);
+                }; 
+
+                function clearBuffer(start, end) {
+                    for (var i = start; i < end && i < len; i++) {
+                        if (tests[i])
+                            buffer[i] = settings.placeholder;
+                    }
+                };
+
+                function writeBuffer() { return input.setValue(buffer.join('')).getValue(); };
+
+                function checkVal(allow) {
+                    //try to place characters where they belong
+                    var test = input.getValue();
+                    var lastMatch = -1;
+                    for (var i = 0, pos = 0; i < len; i++) {
+                        if (tests[i]) {
+                            buffer[i] = settings.placeholder;
+                            while (pos++ < test.length) {
+                                var c = test.charAt(pos - 1);
+                                if (tests[i].test(c)) {
+                                    buffer[i] = c;
+                                    lastMatch = i;
+                                    break;
+                                }
+                            }
+                            if (pos > test.length)
+                                break;
+                        } else if (buffer[i] == test[pos] && i!=partialPosition) {
+                            pos++;
+                            lastMatch = i;
+                        } 
+                    }
+                    if (!allow && lastMatch + 1 < partialPosition) {
+                        input.setValue("");
+                        clearBuffer(0, len);
+                    } else if (allow || lastMatch + 1 >= partialPosition) {
+                        writeBuffer();
+                        if (!allow) input.setValue(input.getValue().substring(0, lastMatch + 1));
+                    }
+                    return (partialPosition ? i : firstNonMaskPos);
+                };
+
+                if (!input.readAttribute("readonly"))
+                    input
+                    .observe("mask:unmask", function() {
+                        input
+                            .store("buffer",undefined)
+                            .store("tests",undefined)
+                            .stopObserving("mask:unmask")
+                            .stopObserving("focus", focusEvent)
+                            .stopObserving("blur", blurEvent)
+                            .stopObserving("keydown", keydownEvent)
+                            .stopObserving("keypress", keypressEvent)
+                            .stopObserving(pasteEventName, pasteEvent);
+                    })
+                    .observe("focus", focusEvent)
+                    .observe("blur", blurEvent)
+                    .observe("keydown", keydownEvent)
+                    .observe("keypress", keypressEvent)
+                    .observe(pasteEventName, pasteEvent);
+
+                checkVal(); //Perform initial check for existing values
+            });
+            return this;
+        }
+    });
+
+    Object.extend(MaskedInput,{    
+        definitions: {
+            '9': "[0-9]",
+            'a': "[A-Za-z]",
+            '*': "[A-Za-z0-9]"
+        },
+
+        masks: {
+            'phone': '(99) 9999-9999',
+            'cpf'  : '999.999.999-99',
+            'cnpj' : '99.999.999/9999-99',
+            'date' : '99/99/9999',
+            'cep'  : '99999-999',
+            'time' : '99:99'
+        },
+
+        apply: function () {
+            Object.keys(MaskedInput.masks).each(function (name) {
+                new MaskedInput('input.mask.' + name, MaskedInput.masks[name]);
+            });
+        }
+    });
+
+    $(document).observe('dom:loaded', MaskedInput.apply.bind(MaskedInput));
+})();

data/init.rb

@@ -0,0 +1 @@
+require 'formtastic_masked_input'

data/lib/formtastic_masked_input.rb

@@ -0,0 +1,15 @@
+module FormtasticMaskedInput
+  def masked_input(method, options)
+    mask = options.delete(:mask)
+
+    raise ArgumentError, 'you must specify a mask' unless mask
+
+    options[:input_html] ||= {}
+    options[:input_html][:class] ||= ''
+    options[:input_html][:class] = "#{options[:input_html][:class]} mask #{mask}".strip
+
+    string_input(method, options)
+  end
+end
+
+Formtastic::SemanticFormBuilder.send(:include, FormtasticMaskedInput)

data/tasks/formtastic_masked_input_tasks.rake

@@ -0,0 +1,4 @@
+# desc "Explaining what the task does"
+# task :active_record_masked_input do
+#   # Task goes here
+# end

metadata

@@ -0,0 +1,64 @@
+--- !ruby/object:Gem::Specification 
+name: formtastic_masked_input
+version: !ruby/object:Gem::Version 
+  version: 0.1.0
+platform: ruby
+authors: 
+- Gabriel Sobrinho
+autorequire: 
+bindir: bin
+cert_chain: []
+
+date: 2010-02-04 00:00:00 -02:00
+default_executable: 
+dependencies: []
+
+description: 
+email: gabriel.sobrinho@gmail.com
+executables: []
+
+extensions: []
+
+extra_rdoc_files: 
+- README.textile
+files: 
+- MIT-LICENSE
+- README.textile
+- Rakefile
+- VERSION
+- generators/formtastic_masked_input/USAGE
+- generators/formtastic_masked_input/formtastic_masked_input_generator.rb
+- generators/formtastic_masked_input/templates/masked_input.js
+- init.rb
+- lib/formtastic_masked_input.rb
+- tasks/formtastic_masked_input_tasks.rake
+has_rdoc: true
+homepage: http://github.com/sobrinho/formtastic_masked_input
+licenses: []
+
+post_install_message: 
+rdoc_options: 
+- --charset=UTF-8
+require_paths: 
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement 
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      version: "0"
+  version: 
+required_rubygems_version: !ruby/object:Gem::Requirement 
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      version: "0"
+  version: 
+requirements: []
+
+rubyforge_project: 
+rubygems_version: 1.3.5
+signing_key: 
+specification_version: 3
+summary: MaskedInput for formtastic
+test_files: []
+